fixed top menu with slide out nav

In this example below you will see how to do a fixed top menu with slide out nav with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mush_el, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mush_el ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>fixed top menu with slide out nav</title>
  <meta name="description" content="Michelle Currier is a designer, coder, and dj. She is a visually preoccupied lover by nature. The design I do is everything from print graphics to layout wire-framing, frontend, and UI. The coding languages I do are CSS3, LESS, PHP, HTML5, some JQuery and Java Script. "><meta name="author" content="Michelle Claire Currier">
<meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Muli'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="container">
	<nav>
    	<div id="main_nav">
			<a href="index.php"><div class="logo_white hide"></div></a>
			<div class="nav_right">
				<div class="usa"><a href="tel:18668826102">1 866 882 6102</a></div>
				<div class="int"><a href="tel:+15047041361">1 504 704 1361</a></div>
				<a href="index.php#request"><span class="demo_button">request a demo</span></a>
				<div id="nav_toggle" class="menu_icon"></div>                                     
			</div>
		</div>
		<div id="sub_nav">
      
			<ul class="nav">
				<li class="main"><a href="index.php#solutions">Solutions</a></li>
				<li class="sub"><a href="features.php">Feature Builder</a></li>
				<li class="sub"><a href="features.php#managed" >Managed Services</a></li>
				<li class="sub"><a href="features.php#mobile">Mobile Reporting Apps</a></li>
				<li class="sub"><a href="sub">Success Stories</a></li>	
			</ul>							
			<ul class="nav">
				<li class="main"><a href="index.php#story">Our Story</a></li>
				<li class="sub"><a href="index.php#story">What makes us different</a></li>
				<li class="sub"><a href="team.php#partners">Who we partner with</a></li>
				<li class="sub"><a href="team.php">Our Team</a></li>
				<li class="sub"><a href="team.php#join">Join the team</a></li>
			</ul>
<ul class="nav">
				<li class="main"><a href="help.php">How Can We Help</a></li>
				<li><a href="help.php#training">Training &amp; Support</a></li>
				<li><a href="help.php">Answers &amp; Solutions</a></li>
				<li><a href="contact_us.php">Contact Us</a></li>
				<li><a href="sub">How to Launch</a></li>
			</ul>
			<ul class="contact">
				<li><a href="contact_us.php">contact us</a></li>
				<li class="usa"><a href="tel:18668826102">1 866 882 6102</a></li>
				<li class="int"><a href="tel:+15047041361">1 504 704 1361</a></li>
				<li><a href="http://thepixelwire.com" target="_blank">Pixel Wire</a></li>
				<li><a href="https://conference2015.hitpath.com" target="_blank">HMC 2015</a></li>
			</ul>

		</div>
  	</nav>
  
  <div id="content">	
		
			<section class="home">
				<div class="flex_content">
          <p>Nullam tincidunt, velit in volutpat ornare, ligula tortor aliquam mi, et eleifend felis ipsum et metus. Integer cursus ut sapien vitae elementum. Proin volutpat efficitur tellus, sit amet ornare metus convallis sit amet. Nullam sed ipsum eu orci vestibulum venenatis. Vivamus semper est quis elit sollicitudin, et pellentesque metus accumsan. Etiam vitae ipsum dapibus; aliquam urna eu, viverra quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus nec arcu et nulla condimentum blandit! Vivamus efficitur risus quis metus luctus tristique id id nibh. Suspendisse consequat dui eget maximus pretium.</p>

<p>Sed vel consectetur nulla. Vivamus sit amet hendrerit nibh. Fusce nec leo sit amet mi volutpat lacinia. Donec fringilla, ex quis faucibus feugiat; est eros vestibulum mauris, at scelerisque mauris urna non dolor. Nunc pretium pellentesque malesuada. Nam aliquet nisl et orci faucibus, sit amet viverra odio convallis. Pellentesque at urna ac mi consequat blandit? Praesent feugiat vulputate orci nec pulvinar. Suspendisse sagittis commodo ullamcorper. Suspendisse potenti. Vivamus ac erat iaculis; cursus lacus vitae, efficitur massa?</p>

<p>Duis et molestie lectus, vitae faucibus dolor? Phasellus sed tellus convallis, lobortis elit ac, dictum dui. Aliquam molestie nisi leo, in convallis mauris iaculis in. Cras ultricies velit vel lectus vestibulum, vitae sollicitudin mauris congue. Nullam gravida urna in hendrerit pellentesque. Aliquam velit dui, sagittis id eleifend eget, pharetra vel ex. Donec pellentesque, arcu sed hendrerit blandit, est diam vulputate magna, eu sollicitudin elit mauris eu diam.</p>

        </div>
    </section>
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mush_el/fixed-top-menu-with-slide-out-nav-WvNbEJ */
/* vars */
body {
  font-family: 'Muli', sans-serif;
}
.border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
  height: 100%;
  padding: 0px;
  font-family: 'Muli', sans-serif;
}
#container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  background: #fff;
}
.home {
  height: 500px;
  width: 100%;
}
.flex_content {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-order: 2;
  order: 2;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  padding: 100px;
  box-sizing: border-box;
  /* calc(~"100vh - 50px"); */
}
/* menu */
nav {
  height: 51px;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: height 2s ease;
  -webkit-transition: height 2s ease;
  background: #233540;
  padding-left: 200px;
  z-index: 1000;
}
.down nav {
  height: 220px;
  transition: height 2s ease;
}
#main_nav,
#sub_nav {
  width: 100%;
}
#main_nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #DC5B26;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 50px;
  z-index: 101;
}
#main_nav li,
#main_nav li a {
  display: inline-block;
  line-height: 50px;
  padding: 0 10px;
  text-decoration: none;
}
#sub_nav {
  padding: 10px 10px 0;
  height: 200px;
  display: flex;
}
#sub_nav ul {
  display: inline-block;
  flex: .2 0 10%;
  list-style: none;
}
#nav_toggle {
  cursor: pointer;
}
#content {
  padding: 50px 0 0;
  min-height: 500px;
  transition: padding 2s ease;
}
.down #content {
  padding: 250px 0 0;
  transition: padding 2s ease;
}
.nav li {
  list-style: none;
  line-height: 20px;
  text-transform: capitalize;
  font-size: 12px;
}
.nav li a {
  color: #fff;
  text-decoration: none;
  transition: all 0.8s ease;
}
.nav li a:hover {
  color: #0D72B9;
  letter-spacing: 1px;
}
.nav li.main {
  font-size: 15px;
  border-bottom: 1px solid #DC5B26;
  line-height: 30px;
  margin-bottom: 3px;
  color: #0D72B9;
  text-transform: uppercase;
}
ul.nav {
  display: inline-block;
  vertical-align: top;
  width: 24%;
  padding-left: 5%;
  box-sizing: border-box;
}
ul.contact {
  width: 24%;
  display: inline-block;
  padding-left: 8%;
  padding-top: 5px;
  box-sizing: border-box;
  list-style: none;
}
.contact li a {
  border-bottom: none;
  margin-bottom: 4px;
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}
.logo_white {
  background: url('http://michelle.hitpath.com/images/logo_white.png') 0 0 no-repeat;
  width: 118px;
  height: 31px;
  display: inline-block;
  vertical-align: middle;
  float: left;
  margin: 10px 0px 0px 20px;
}
#main_nav div.hide {
  display: none;
}
#main_nav div {
  display: inline-block;
  margin-right: 30px;
}
#main_nav span {
  width: 200px;
  display: inline-block;
  padding-left: 30px;
  color: #fff;
  box-sizing: border-box;
  cursor: pointer;
}
div.menu_icon {
  background: url('http://michelle.hitpath.com/images/menu.png') no-repeat;
  width: 20px;
  height: 20px;
  display: inline-block;
  margin: 10px 20px -5px 20px;
}
#main_nav div a {
  color: #fff;
  text-decoration: none;
}
.nav_right {
  float: right;
}
#main_nav .usa:before {
  background: url('http://michelle.hitpath.com/images/us_w.png') no-repeat;
  width: 30px;
  height: 20px;
  content: " ";
  display: inline-block;
  vertical-align: middle;
}
#main_nav .int:before {
  background: url('http://michelle.hitpath.com/images/int_w.png') no-repeat;
  width: 25px;
  height: 20px;
  content: " ";
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}
.contact li.int a,
.contact li.usa a {
  color: #DC5B26;
  text-decoration: none;
}
.contact li.int a:hover,
.contact li.usa a:hover {
  color: #fff;
}
.usa:before {
  background: url('http://michelle.hitpath.com/images/us_org.png') no-repeat;
  width: 30px;
  height: 20px;
  content: " ";
  display: inline-block;
  vertical-align: middle;
}
.int:before {
  background: url('http://michelle.hitpath.com/images/int_org.png') no-repeat;
  width: 25px;
  height: 20px;
  content: " ";
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}
@media only screen and (max-width: 1160px) {
  nav {
    padding-left: 0px;
  }
  #sub_nav ul {
    -webkit-flex: 0.3 0 10%;
    -moz-flex: 0.3 0 10%;
    -ms-flex: 0.3 0 10%;
    -o-flex: 0.3 0 10%;
    flex: 0.3 0 10%;
  }
}
@media only screen and (max-width: 930px) {
  #sub_nav ul {
    -webkit-flex: 1 0 3%;
    -moz-flex: 1 0 3%;
    -ms-flex: 1 0 3%;
    -o-flex: 1 0 3%;
    flex: 1 0 3%;
  }
  ul.contact {
    padding-left: 3%;
  }
  ul.nav {
    padding-left: 2%;
  }
  #sub_nav {
    padding-left: 0px;
  }
  #main_nav div {
    margin-right: 10px;
    display: inline-block;
  }
  #main_nav span {
    display: none;
  }
}
@media only screen and (max-width: 660px) {
  #sub_nav ul {
    -webkit-flex: 1 1 100%;
    -moz-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    -o-flex: 1 1 100%;
    flex: 1 1 100%;
  }
  nav #main_nav {
    height: 51px;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #DC5B26;
    z-index: 1000;
  }
  .down #content {
    padding: 50px 0 0;
    transition: none;
  }
  nav {
    transition: left 2s ease;
    -webkit-transition: left 2s ease;
    left: 100%;
    position: absolute;
  }
  .down nav {
    height: auto;
    left: 0%;
    transition: left 2s ease;
    -webkit-transition: left 2s ease;
  }
  #sub_nav {
    list-style: none;
    margin: 51px 0px 0px 10px;
    right: 0;
    width: 220px;
    background: #233540;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    height: auto;
    overflow: auto;
  }
  div.menu_icon {
    background: url('http://michelle.hitpath.com/images/menu.png') no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin: -8px 20px 0px 20px;
    float: right;
  }
  p {
    margin-bottom: 20px;
    font-family: 'Muli', sans-serif;
  }
  .nav li {
    list-style: none;
    line-height: 30px;
    text-transform: capitalize;
    font-size: 18px;
  }
  #sub_nav ul {
    display: inline-block;
    list-style: none;
    padding: 0px 10px;
    margin-top: 0px;
  }
  .nav li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.5s ease;
  }
  .nav li a:hover {
    color: #0D72B9;
  }
  #main_nav div {
    margin-right: 10px;
    display: inline-block;
  }
  #main_nav div.usa,
  #main_nav div.int {
    display: block;
    float: left;
    clear: both;
    padding-top: 2px;
  }
  #main_nav span {
    display: none;
  }
}
@media only screen and (max-width: 420px) {
  #main_nav div.usa,
  #main_nav div.int {
    margin-right: 0px;
  }
}
@media only screen and (max-width: 380px) {
  .logo_white {
    margin-left: 5px;
    background-size: 70%;
    margin-right: -20px;
  }
  #main_nav div.usa::before,
  #main_nav div.int::before {
    display: none;
  }
}


/*Downloaded from https://www.codeseek.co/mush_el/fixed-top-menu-with-slide-out-nav-WvNbEJ */
$(document).ready(function() {
  $('#nav_toggle').on( 'click', function() {
  $('#container').toggleClass( 'down' );
});
  
  $('.menu_icon').on('click', function() { $('#sub_nav').toggleClass('isOpen');
});
  $('.menu_icon').on('click', function() {
    $('#sub_nav').removeClass('isOpen');
  })
});
$( window ).scroll( function() {
  $('#container').removeClass( 'down' );
  $('.logo_white').removeClass( 'hide' );
});

Comments