Responsive Mobile Menu

• 1st November 2017
• Tutorials
• 3:17 reading time (ish)
• 626 words

It’s been awhile since the last mobile menu I put together so I thought I’d put another one together that might be of interest for anyone to use.

The example above has its menu icon always shown, not everyone is a fan of this so you can easily set it to display under certain media query conditions (hence why the HTML blocks are separated as they are). I’ve left out the media queries as you might want to tweak the different things yourself (menu font size for example).

<header>
  <div class="container clear">
    <div id="logo" class="alignCenter left">Logo</div>
  <nav class="right">
    <div id="toggle" class="right">
      <span></span><span></span><span></span><span></span>
    </div>
	  <div id="menu">
      <ul id="menu-left-menu" class="menu">
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>
      <div id="extra" class="clear">
        <div class="call_us left">
          <a href="" title="Call Us">Call</a>
        </div>
		  	<div class="email_us right">
          <a href="" title="Email Us">Email</a>
        </div>
	  	</div>
	  </div>
  </nav>
</div>
</header>

/*Everything else*/
header {
    position:fixed;
    top:0;
    width:100%;
    height:115px;
    background:#2196F3;
}
#logo {
    width:60px;
    height:60px;
    color:#FFF;
    background:#673ab7;
    position: relative;
    line-height:60px;
    top: 25px;
    left: 25px;
    z-index: 555;
}

nav #menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    background: #212121;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
}
nav #menu ul {
    margin: 0;
    -webkit-transform: translateY(15vh);
    transform: translateY(15vh);
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
}
nav ul li {
    list-style: none;
    display: block;
    text-align: center;
    margin: 0;
}
nav #menu ul li a:hover {
    color: #673ab7;
}
nav #menu ul li a {
    color: #FFF;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    padding: 15px;
    font-size: 60px;
    line-height: 50px;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
#toggle {
    width: 60px;
    height: 60px;
    position: relative;
    top: 25px;
    right: 25px;
    background: #673ab7;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    cursor: pointer;
    z-index: 555;
}
#toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 35px;
    background: #FFF;
    border-radius: 25px;
    opacity: 1;
    left: 50%;
    margin-left: -17px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
#toggle span:nth-child(1) {
    top: 19px;
}
#toggle span:nth-child(2),
#toggle span:nth-child(3) {
    top: 29px;
}
#toggle span:nth-child(4) {
    top: 39px;
}
#toggle.open span:nth-child(1) {
    top: 29px;
    width: 0%;
    left: 50%;
    margin: 0;
}
#toggle.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#toggle.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#toggle.open span:nth-child(4) {
    top: 29px;
    width: 0%;
    left: 50%;
    margin: 0;
}
body.active nav #menu {
    opacity: 1;
    visibility: visible;
}
body.active nav #menu ul {
    -webkit-transform: translateY(20vh);
    transform: translateY(20vh);
}
#extra {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
.call_us,.email_us {
    position: relative;
    bottom: 25px;
}
.call_us {
    left: 25px;
}
.email_us {
    right: 25px;
}
.call_us a,.email_us a {
    display: block;
    padding:15px;
    position: relative;
    background: #673ab7;
    color:#FFF;
}



/*Page Style*/
body {margin:0;padding:0;font-family: 'Open Sans', sans-serif;}
.left {float: left;}
.right {float: right;}
.padAll {padding: 25px;}
.alignCenter {text-align:center;}
a {text-decoration: none;}
p {margin:0;}
.clear::after{clear:both;content:"";display:table;}
#content_area {background:#E3F2FD;margin-top:115px;height:500px;}
footer {background:#212121;color:#FFF;}

//Mobile menu
$('#toggle').on('click', function(){
	$(this).toggleClass('open');
	$('body').toggleClass('active');
});

Enjoy!

codepencsshtmlmenumobileresponsivetutorial