JavaScript Hamburger Menu

This JavaScript code snippet helps you to create a hamburger menu. It uses an add event listener to the hamburger button, which toggles the active class on both the hamburger button and the navbar when it is clicked. The first line assigns the DOM element with the class name “hamburger” to the variable “hamburger”, the second line assigns the DOM element with the class name “navbar” to the variable “menu”, and the third line assigns the DOM element with the class name “container” to the variable “bod”.

Finally, the fourth line adds an event listener to the hamburger button that listens for a click event and toggles the active class on both the hamburger button and the navbar when the button is clicked.

How to Create JavaScript Hamburger Menu

First of all, load the following assets into the head tag of your HTML document.

<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">

Create the HTML structure for a hamburger menu as follows:

<div class="h1">
  <h1>Click <span id="ham">hamburger</span> icon</h1>
</div>  

<div class="container">
      <div class="hamburger">
          <div class="line"></div>
          <div class="line"></div>
          <div class="line"></div>
        </div>
    <menu class="navbar">
      <ul>
        <li><a href="#"><b>home</b></a></li>
        <li><a href="#"><b>portfolio</b></a></li>
        <li><a href="#"><b>images</b></a></li>
        <li><a href="#"><b>contact</b></a></li>
      </ul>
    </menu>
  </div>

Now, style the hamburger menu using the following CSS styles:

* {
  margin: 0;
  padding: 0;
}

#ham {
  color: #a77a33;
}

.h1 h1{
  text-align: center;
  position: absolute;
  left: 25%;
  top: 40%;
  font-size: 5em;
  color: #633200;
  font-family: 'Raleway', sans-serif;
}

body {
  background-color: #d3d3d3;
}

.navbar {
  background-color: #333;
  width: 25%;
  height: 100vh;
  display: none;
}

.navbar ul {
  overflow: hidden;
  list-style-type: none;
  padding-top: 50%;
  margin: 0;
}

.cd__main{
display: block !important;
}
.navbar li {
  display: block;
  margin: 0;
  padding: 5% 50px;
  width: 100%;
}

.navbar li:hover {
  cursor: pointer;
}


.navbar li a {
  color: #d3e3e3;
  text-decoration: none;
  font-family: 'Raleway', sans-serif;
  font-size: 1.6em;
  transition: all .5s;
}

.navbar li:hover {
  cursor: pointer;
  background-color: #ce3939;
  letter-spacing: 10px;
}

.hamburger {
  margin: 0;
  margin-left: 15px;
  padding: 0;
  float: left;
  transition: opacity .3s;
}

.hamburger:hover {
  cursor: pointer;
  opacity: .5;
}

.hamburger .line{
  width: 50px;
  height: 5px;
  background: rgb(236, 66, 66);
  margin: 8px auto;
  transition: all 0.3s ease-in-out;
  border-radius: 5px;
}

.hamburger .line:nth-child(1) {
  background-color: #a77a33;
}

.hamburger .line:nth-child(2) {
  background-color: #633200;
}

.hamburger .line:nth-child(3) {
  background-color: #a77a33;
}

.hamburger.isactive .line:nth-child(2) {
  opacity: 0;
}

.hamburger.isactive .line:nth-child(1) {
  transform: translateY(13px) rotate(45deg);
}

.hamburger.isactive .line:nth-child(3) {
  transform: translateY(-13px) rotate(-45deg);
}

.navbar {
  transition: all 2s ease-in-out;
}

.navbar.active {
  display: block;
  animation: fade .5s;
}

@keyframes fade {
  from{transform: translateX(-200px); opacity: 0;}
  to {transform: translateX(0px); opacity: 1;}
}


@media screen and (max-width: 1360px) {
  
  .h1 h1 {
    font-size: 3em;
    left: 35%;
  }
  
  .navbar {
    width: 30%;
  }
  
  .navbar ul {
    padding-left: 0%;
  }
  
  .navbar li {
    padding: 3% 0;
  }
  
  .navbar li a {
    font-size: 1.2em;
  }
  
}

@media screen and (max-width: 768px) {
  .hamburger {
    float: right;
  }
  
  .h1 h1 {
    left: 23%;
    top: 50%;
    font-size: 1.4em;
  }
  
  .navbar {
  background-color: #333;
  width: 100%;
  height: 45vh;
  display: none;
}

.navbar ul {
  overflow: hidden;
  list-style-type: none;
  padding-top: 3%;
  padding-left: 30%;
  padding-right: 3%;
  padding-bottom: 3%;
  margin: 0;
}

.navbar li {
  display: block;
  margin: 0;
  padding: 14px 20px;
  width: 100%;
  transition: background-color .5s;
}

.navbar li:hover {
  cursor: pointer;
  background-color: #ce3939;
}


.navbar li a {
  color: #d3e3e3;
  text-decoration: none;
  padding: 14px 16px;
  font-family: 'Raleway', sans-serif;
  font-size: 1em;
  transition: all 1s;
}

.navbar li:hover {
  cursor: pointer;
  background-color: #ce3939;
  letter-spacing: 0px;
}

  
 

}

Finally, add the following JavaScript function for its functionality:

let hamburger = document.querySelector('.hamburger');
let menu = document.querySelector('.navbar');
let bod = document.querySelector('.container');

hamburger.addEventListener('click', function() {
  hamburger.classList.toggle('isactive');
  menu.classList.toggle('active');

});

That’s all! hopefully, you have successfully created the JavaScript hamburger menu. If you have any questions or suggestions, feel free to comment below.