Fullscreen Hamburger Navigation With JavaScript And CSS

Preview:

Description:

A vanilla JavaScript and CSS/CSS3 based navigation helps you create a mobile-friendly, fullscreen, responsive menu with a hamburger toggle button. Animated with the CSS3 transitions and transforms.

How to use it:

Create the html for the hamburger toggle button.

<header>
  <nav class="menu">
     <div class="strokes"></div>
     <div class="strokes"></div>
     <div class="strokes"></div>
  </nav>
</header>

Create the navigation menu.

<div class="fullscreenmenu">
  <ul>  
      <li>
          <a href="#">About</a>
      </li>
      <li>
          <a href="#">Blog</a>
      </li>
      <li>
          <a href="#">Contact</a>
      </li>
  </ul>
</div>

The required CSS/CSS3 styles.

nav.menu {
  width: 42px;
  height: 36px;
  float: right;
  margin: 30px 30px 0 0;
  position: relative;
  z-index: 999;
  cursor: pointer;
}
nav.menu div.strokes {
  width: 100%;
  height: 6px;
  margin: 0 0 6px 0;
  background: white;
  transition: transform 0.3s, opacity 0.1s;
}
.hide {
  opacity: 0;
  transform: translateX(-42px);
}
.animate0 { transform: rotate(45deg) translateY(17px); }
.animate2 { transform: rotate(-45deg) translateY(-17px); }
.fullscreenmenu {
  background-color: rgba(52, 152, 219, 0);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  -webkit-transition: background 0.5s ease-in-out, opacity 0.5s;
  -moz-transition: background 0.5s ease-in-out, opacity 0.5s;
  -ms-transition: background 0.5s ease-in-out, opacity 0.5s;
  -o-transition: background 0.5s ease-in-out, opacity 0.5s;
  transition: background 0.5s ease-in-out, opacity 0.5s;
  text-align: center
}
.fullscreenmenu.show {
  opacity: 1;
  background-color: rgba(52, 152, 219, 0.9);
  -webkit-transition: background 0.5s ease-in-out, visibility 0.5s;
  -moz-transition: background 0.5s ease-in-out, visibility 0.5s;
  -ms-transition: background 0.5s ease-in-out, visibility 0.5s;
  -o-transition: background 0.5s ease-in-out, visibility 0.5s;
  transition: background 0.5s ease-in-out, visibility 0.5s;
}
.fullscreenmenu ul { padding: 10%; }
.fullscreenmenu li a {
  visibility: inherit;
  color: white;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 70px;
  text-decoration: none;
  font-weight: 100;
  text-transform: uppercase;
  line-height: 150%;
}

The JavaScript to active the fullscreen hamburger navigation.

(function () {
  "use strict";
    
    var fullscreenmenu = document.querySelector(".fullscreenmenu");
    
    var strokes = document.querySelectorAll(".strokes"),
        icon = document.querySelector(".menu"),
        fullscreenmenu = document.querySelector(".fullscreenmenu");
  
    function transformStart() {
        strokes[0].classList.toggle("animate0")
        strokes[1].classList.toggle("hide");
        strokes[2].classList.toggle("animate2");
        fullscreenmenu.classList.toggle("show");
    }
    
    icon.addEventListener("click", transformStart);
})();