Full width mobile nav dropdown

full-width-mobile-nav-dropdown.markdown

Full width mobile nav dropdown

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

A Pen by Matt Studdert on CodePen.

License.

index.html

<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.js

// open mobile menu
$('.js-toggle-menu').click(function(e){
  e.preventDefault();
  $('.mobile-header-nav').slideToggle();
  $(this).toggleClass('open');
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import "compass/css3";

* {
  box-sizing: border-box;
}

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

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

// styling of dropdown menu
.mobile-header-nav {
  background-color: #222222;
  display: none; // hide until menu is clicked
  list-style: none;  // replace with %styled-list
  margin: 0; // replace with %styled-list
  padding: 0; // replace with %styled-list
  position: absolute;
  top: 100px; // if nav sliding in below header
  width: 100%;
  
  li {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    a {
      color: white;
      display: block;
      padding: 15px 0;
      text-align: center;
      text-decoration: none;
      transition: all 0.3s ease-in-out;
      
      &:hover {
        background-color: lighten(#222222, 5%);
      }
    }
  }
}


// styling of hamburger menu
.hamburger-menu {
  display: inline-block;
  height: 100px;
  padding: 35px 25px;
  transition: all 0.3s ease-in-out;

  &:hover {
    cursor: pointer;
  }

  .menu-item {
    background: black;
    display: block;
    height: 3px;
    margin: 0 0 10px;
    transition: all 0.3s ease-in-out;
    width: 40px;
  }
    
  &.open {

    .menu-item {
      margin: 0 0 5px;

      &:first-child {
        transform: rotate(45deg);
        transform-origin: 10px;
      }
      &:nth-child(2) {
        opacity: 0;
      }
      &:nth-child(3) {
        transform: rotate(-45deg);
        transform-origin: 8px;
      }
    }
  }
}