Responsive Menu

index.html

<nav>
  <div class="brand">
    BRAND
  </div>
  <!--<button class="mobile-btn" id="mobile-btn">Menu</button>-->
  <button id="mobile-btn" class="hamburger-btn">
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
  </button>
  <ul class="top-menu" id="top-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <a href="#">Products</a>
      <ul>
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
        <li><a href="#">Product 3</a></li>
      </ul>
    </li>
    <li><a href="#">FAQs</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<main class="main">
<h1>Page Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam provident suscipit, dignissimos veniam animi iusto, saepe molestias dolorem vel dolore alias, unde commodi quidem corporis et aliquid! Sed aliquam numquam minima nihil delectus non harum cum ea, eius saepe nam. Nesciunt esse, iste distinctio enim! Officia cumque, tenetur enim animi.</p>
<p>Quisquam rerum eaque perferendis earum dolorum modi voluptatem libero ad autem. Deleniti iusto, officiis ratione ipsam commodi aperiam distinctio placeat eum in laudantium itaque blanditiis repudiandae hic accusantium perferendis, rem aut expedita dolorem, porro ducimus quae illum. Eius ratione inventore quam fugit assumenda impedit, adipisci accusamus, velit ullam placeat earum.</p>
<p>Labore autem officia cum, ipsam enim dolorum quia consectetur, at in minima a accusantium, animi eaque nulla facere assumenda adipisci perspiciatis ducimus illum. Temporibus, sunt, qui. Nulla ab repellat nemo, facilis sequi? Nihil doloribus commodi, hic delectus vero ut. Delectus, quibusdam atque. Nobis dolores fugit voluptas labore deleniti, voluptate ipsam!</p>
</main>

responsive-menu.markdown

Responsive Menu

A Pen by Charles Ojukwu on CodePen.

License.

script.js

(function (){
  "use strict";
  var mobBtn, topMenu;
  
  function init() {
    mobBtn = document.getElementById("mobile-btn");
  topMenu = document.getElementById("top-menu");
    mobBtn.addEventListener("click",mobileMenu,false);
  }
  
  function mobileMenu() {
    if(topMenu.classList.contains("mobile-open")) {
       topMenu.classList.remove("mobile-open");
       }else{
        topMenu.classList.add("mobile-open");
       }
    if (mobBtn.classList.contains("hamburger-cross")) {
			mobBtn.classList.remove("hamburger-cross");
		}
		else {
			mobBtn.classList.add("hamburger-cross");
		}
  }
  
  document.addEventListener("DOMContentLoaded",init);
  
})();

style.scss

//reset.css included
//Vars
$nav-height: 60px;
$primary: #334;


//Typography
html {
  font-family: "Hind", sans-serif;
  color: #333;
  background: #eee;
}

button {
  outline: none;
  cursor: pointer;
}

h1,p {
  margin: 1em 0;
}

p {
  line-height: 1.6;
}

h1 {
  line-height: 1;
  font-size: 2em;
  font-weight: 600;
}

.main {
  padding: 0 1rem;
}

//Menu styles
nav {
  height: $nav-height;
  background: $primary;
  position: relative;
  color: #fff;
  font-weight: 500;
}

.brand {
  float: left;
  height: $nav-height;
  line-height: $nav-height;
  padding: 0 1em;
}

.top-menu {
  display: block;
  clear: both;
  background: $primary;
  visibility: hidden;
  transform: translateY(-2em);
  opacity: 0;
  transition: 200ms ease 100ms;
  li a {
        border-bottom: 1px solid       darken($primary,5%);
    transition: background 200ms ease;
      }
  &>li {
    &:first-child a {
      border-top: 1px solid       darken($primary,5%);
    }
    ul {
      background: darken($primary,10%);
      //box-shadow: inset 0px 0px 8px rgba(black,.05);
      li:not(:last-child) a {
        border-bottom-color: darken($primary,15%);
      }
      a {
        padding-left: 1rem;
      }
      a:hover {
        background: darken($primary,15%);
      }
    }
    a {
      padding: 1em 0.5em;
    }
    &>a {
      &:hover {
        background: darken($primary,5%);
      }
    }
  }
  a {
    display: block;
    text-decoration: none;
    color: #fff;
  }
}

.hamburger-btn {
	float: right;
	display: block;
  border: none;
  background: transparent;
  color: #fff;
	height: calc(#{$nav-height} - 1rem);
	width: calc(#{$nav-height} - 1rem);
	margin: 0.5rem 0.5rem 0 0;
	padding: 0;
	position: relative;
&:hover {
  background: darken($primary,5%);
}
	.hamburger-line {
		height: 2px;
		width: calc(#{$nav-height} - 2rem);
		background: #fff;
		display: block;
		position: absolute;
		left: calc(0.5rem - 1px);
		transition: transform 150ms ease-in,
			top 150ms ease-out 150ms,
			bottom 150ms ease-out 150ms,
			opacity 150ms ease 75ms;
		&:first-child {
			top: 0.75rem;
		}
		&:nth-child(2) {
			top: calc(50% - 1px);
		}
		&:last-child {
			bottom: 0.75rem;
		}
	}
}

.hamburger-cross {
	.hamburger-line {
		transition: transform 150ms ease-out 150ms,
			top 150ms ease-in,
			bottom 150ms ease-in,
			opacity 150ms ease 75ms;
		&:first-child {
			transform: rotate(45deg);
			top: calc(50% - 1px);
		}
		&:nth-child(2) {
			top: calc(50% - 1px);
			opacity: 0;
		}
		&:last-child {
			transform: rotate(-45deg);
			bottom: calc(50% - 1px);
		}
	}
}

.mobile-open {
  visibility: visible;
  opacity: 1;
  transform: none;
}

@media screen and (min-width: 768px) {
.top-menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  a {
    border: none;
  }
  float: right;
  clear: none;
  display: block;
  height: $nav-height;
  &>li {
    float: left;
    padding: 0;
    position: relative;
    &:first-child a {
      border: none;
    }
    ul {
      position: absolute;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transition: 200ms ease 100ms;
      transform: translateY(-1em);
      right: 0;
      //display: none;
      box-shadow: none;
      width: 150px;
      a {
        padding: 0.5em;
        border: none;
      }
    }
    &:hover ul {
      display: block;
      opacity: 1;
      visibility: visible;
      transform: none;
    }
    &>a {
      height: $nav-height;
      line-height: $nav-height;
      padding: 0 1em;
      border: none;
    }
  }
  a {
    display: block;
  }
}
.mobile-btn, .hamburger-btn {
  display: none;
}
}

styles

<link href="https://fonts.googleapis.com/css?family=Hind:300,400,500,600" rel="stylesheet" />