Easy Hamburger Navigation In jQuery & Vanilla JavaScript

An easy hamburger navigation system that slides out a side menu from the edge of the screen when toggled. Can be implemented in either jQuery or Vanilla JavaScript.

See Also:

• 10 Best Off-canvas Mobile Menus In JavaScript And CSS

How to use it:

1. Create the HTML for the hamburger toggle button & side menu and then insert them into your header navigation.

<header class="header">
  <h1 class="title">Site Logo</h1>
  <!-- Side Nav -->
  <nav id="js-nav" class="nav">
    <ul class="list">
      <li>Menu 1</li>
      <li>Menu 2</li>
      <li>Menu 3</li>
    </ul>
  </nav>
  <!-- Hamburger Button -->
  <button id="js-hamburger" class="hamburger" type="button">
    <span id="js-top-line" class="top-line"></span>
    <span id="js-center-line" class="center-line"></span>
    <span id="js-bottom-line" class="bottom-line"></span>
  </button>
</header>

2. The necessary CSS styles for the side menu.

.nav {
  background: #999999;
  position: fixed;
  top: 0;
  right: 0;
  width: 40%; /* 100% = fullscreen */
  height: 100vh;
  transition: transform 0.7s, opacity 1s;
  transform: translateX(100%);
  opacity: 0;
}

.nav.show {
  transform: translateX(0%);
  opacity: 1;
}

.list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: inherit;
}

3. Convert the button into a hamburger toggle.

.hamburger {
  position: relative;
  margin-left: auto;
  width: 45px;
  height: 35px;
  z-index: 1;
}

.hamburger span {
  position: absolute;
  left: 0;
  background: #ffffff;
  width: inherit;
  height: 5px;
  transition: transform 0.5s, opacity 0.5s;
}

.top-line {
  top: 0px;
}

.center-line {
  top: 15px;
}

.bottom-line {
  bottom: 0px;
}

.top-line.active {
  transform: translateY(15px) rotate(45deg);
}

.center-line.active {
  opacity: 0;
}

.bottom-line.active {
  transform: translateY(-15px) rotate(-45deg);
}

4. Activate the hamburger navigation with Vanilla JavaScript.

const hamburgerBtn = document.getElementById("js-hamburger");
const topLine = document.getElementById("js-top-line");
const centerLine = document.getElementById("js-center-line");
const bottomLine = document.getElementById("js-bottom-line");
const nav = document.getElementById("js-nav");

hamburgerBtn.addEventListener("click", () => {
  topLine.classList.toggle("active");
  centerLine.classList.toggle("active");
  bottomLine.classList.toggle("active");
  nav.classList.toggle("show");
});

5. Activate the hamburger navigation with jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

$("#js-hamburger").click(function () {
  $("#js-top-line").toggleClass("active");
  $("#js-center-line").toggleClass("active");
  $("#js-bottom-line").toggleClass("active");
  $("#js-nav").toggleClass("show");
});

---

This awesome jQuery plugin is developed by ryu0947. For more Advanced Usages, please check the demo page or visit the official website.