Basic Hamburger Toggle Menu With CSS And Vanilla JavaScript

Category: Javascript , Menu & Navigation | October 7, 2018
Author: mranenko
Views Total: 5,540
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:


3 thoughts 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
  2. ahituna6

    Hi there! Does anyone know why I can’t get the links to work within the nav? Menu toggles shut no matter where i click.

    Reply
  3. Mark

    Whenever you click on the sidebar it’s toggling off the sidebar via the nav EventListener — if you remove it (or comment it out) then it should work as expected.

    hamburger.navToggle.addEventListener(‘click’, function(e) { hamburger.doToggle(e); });
    // hamburger.nav.addEventListener(‘click’, function(e) { hamburger.doToggle(e); });

    Reply

Leave a Reply