Basic Hamburger Toggle Menu With CSS And Vanilla JavaScript

Category: Javascript , Menu & Navigation | October 7, 2018
Author: mranenko
Views Total: 5,092
Official Page: Go to website
Last Update: October 7, 2018
License: MIT

Preview:

Basic Hamburger Toggle Menu With CSS And Vanilla JavaScript

Description:

A pure JavaScript/CSS based hamburger navigation that allows you to toggle an off-screen sidebar menu when you click on the hamburger trigger.

How to use it:

Create the sidebar menu and hamburger menu trigger in the webpage.

<div class="nav-toggle">
  <div class="nav-toggle-bar"></div>
</div>
<nav class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Style the sidebar menu in the CSS.

.nav {
  -webkit-transition: left 0.5s ease;
  -moz-transition: left 0.5s ease;
  -ms-transition: left 0.5s ease;
  -o-transition: left 0.5s ease;
  transition: left 0.5s ease;
  background: #28dde0;
  color: white;
  cursor: pointer;
  font-size: 2rem;
  height: 100vh;
  left: -20rem;
  padding: 6rem 2rem 2rem 2rem;
  position: fixed;
  top: 0;
  width: 20rem;
  z-index: 1;
}

.nav.expanded { left: 0; }

.nav ul {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  list-style: none;
  margin: 0;
  padding: 0;
}

Style & animate the hamburger trigger when the menu is opened and closed.

.nav-toggle {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  height: 2rem;
  left: 2rem;
  position: fixed;
  top: 2rem;
  width: 3.6rem;
  z-index: 2;
}

.nav-toggle:hover { opacity: 0.8; }

.nav-toggle .nav-toggle-bar,  .nav-toggle .nav-toggle-bar::after,  .nav-toggle .nav-toggle-bar::before {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background: white;
  content: '';
  height: 0.4rem;
  width: 100%;
}

.nav-toggle .nav-toggle-bar { margin-top: 0; }

.nav-toggle .nav-toggle-bar::after { margin-top: 0.8rem; }

.nav-toggle .nav-toggle-bar::before { margin-top: -0.8rem; }

.nav-toggle.expanded .nav-toggle-bar { background: transparent; }

.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
  background: white;
  margin-top: 0;
}

.nav-toggle.expanded .nav-toggle-bar::after {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.nav-toggle.expanded .nav-toggle-bar::before {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

The JavaScript to toggle the CSS classes when the menu is opened and closed.

(function() {

  var hamburger = {
    navToggle: document.querySelector('.nav-toggle'),
    nav: document.querySelector('nav'),

    doToggle: function(e) {
      e.preventDefault();
      this.navToggle.classList.toggle('expanded');
      this.nav.classList.toggle('expanded');
    }
  };

  hamburger.navToggle.addEventListener('click', function(e) { hamburger.doToggle(e); });
  hamburger.nav.addEventListener('click', function(e) { hamburger.doToggle(e); });

}());

Changelog:

10/07/2018

  • Fix for external links functionality

You Might Be Interested In:


One thought on “Basic Hamburger Toggle Menu With CSS And Vanilla JavaScript

  1. Eric

    Hi,
    Very nice work, but everything works well on chrome and firefox, but .nav expand does not open on Safari, at least on iphone 4 in Safari. (I’ve set up hamburger toggle menu on index.html only. Problem seems with -webkit-transition. Any idea what the problem could be?
    Thank you very much!

    Reply

Leave a Reply