Full width mobile nav dropdown

In this example below you will see how to do a Full width mobile nav dropdown with some HTML / CSS and Javascript

Basic structure for a mobile nav dropdown with smooth animations on hamburger menu and nav.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Full width mobile nav dropdown</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

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

  
</head>

<body>

  <header>

  <nav class="mobile-nav-wrap" role="navigation">
    <ul class="mobile-header-nav">
      <li><a href="#">Nav Item 1</a></li>
      <li><a href="#">Nav Item 2</a></li>
      <li><a href="#">Nav Item 3</a></li>
    </ul>
  </nav>

  <a class="mobile-menu-toggle js-toggle-menu hamburger-menu" href="#">
    <span class="menu-item"></span>
    <span class="menu-item"></span>
    <span class="menu-item"></span>
  </a>
  
</header>
  <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/stooderrr/full-width-mobile-nav-dropdown-pvLamG */
* {
  box-sizing: border-box;
}

header {
  box-shadow: 0px 5px 5px #999999;
  height: 100px;
  position: relative;
}

@media (min-width: 768px) {
  .mobile-nav-wrap {
    /* display: none; */
  }
}

.mobile-header-nav {
  background-color: #222222;
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100px;
  width: 100%;
}
.mobile-header-nav li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-header-nav li a {
  color: white;
  display: block;
  padding: 15px 0;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
.mobile-header-nav li a:hover {
  background-color: #2f2f2f;
}

.hamburger-menu {
  display: inline-block;
  height: 100px;
  padding: 35px 25px;
  transition: all 0.3s ease-in-out;
}
.hamburger-menu:hover {
  cursor: pointer;
}
.hamburger-menu .menu-item {
  background: black;
  display: block;
  height: 3px;
  margin: 0 0 10px;
  transition: all 0.3s ease-in-out;
  width: 40px;
}
.hamburger-menu.open .menu-item {
  margin: 0 0 5px;
}
.hamburger-menu.open .menu-item:first-child {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 10px;
          transform-origin: 10px;
}
.hamburger-menu.open .menu-item:nth-child(2) {
  opacity: 0;
}
.hamburger-menu.open .menu-item:nth-child(3) {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: 8px;
          transform-origin: 8px;
}


/*Downloaded from https://www.codeseek.co/stooderrr/full-width-mobile-nav-dropdown-pvLamG */
// open mobile menu
$('.js-toggle-menu').click(function(e){
  e.preventDefault();
  $('.mobile-header-nav').slideToggle();
  $(this).toggleClass('open');
});

Comments