Press "Enter" to skip to content

Hamburger Navigation Menu Using JavaScript and jQuery

Hamburger menu with JavaScript and jQuery – Easy hamburger navigation system that slides off a side menu from the edge of the screen when switching. It can be executed in jQuery or Vanilla JavaScript.

hamburger menu javascript, hamburger menu javascript example, jquery hamburger menu responsive, vanilla javascript toggle menu, javascript hamburger menu toggle

How to make use of it:

1. Create the HTML for the hamburger toggle button & side menu after which 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 needed 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");
});

Easy Hamburger Navigation In jQuery, Hamburger menu with JavaScript Plugin/Github, hamburger menu css responsive, vanilla javascript hamburger menu


See Demo And Download

Official Website(ryu0947): Click Here

This superior jQuery/javascript plugin is developed by ryu0947. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.