You are currently viewing Hamburger Menu Using HTML,CSS and JavaScript (Source Code)

Hamburger Menu Using HTML,CSS and JavaScript (Source Code)

Telegram Group Join Now

Hamburger Menu Using HTML, CSS and JavaScript (Source Code)

The hamburger menu has become an std icon for Navigation, it has become so popular that even most mainstream platforms and apps use them nowadays. the hamburger menu is 3 bar line and when we click on the bar there’s a menu open and close icon that appears that it Hamburger menu.

It was named in this manner because of its resemblance to the Hamburger.

 
Hamburger Menu Using HTML,CSS and JavaScript
Hamburger Menu Using HTML,CSS, and JavaScript

Why use Hamburger Menu?

ADVERTISEMENT

The hamburger menu gives the Website a neater and cleaner way to navigate or by organizing content. Also, Designers have been using the Hamburger menu for so long that it has become a standard itself.

50+ HTML, CSS & JavaScript Projects With Source Code

How to Create Hamburger-menu:

There are multiple ways to create Hamburger Menu. Today we’ll be creating a Hamburger Menu with the help of HTML, CSS & JavaScript.
Without further a do, Let’s get right into it.

Code by Om Bandiwan
Project Download Link Available Below
Language used HTML, CSS and JavaScript
External link / Dependencies No
Responsive No
Hamburger Menu Table

1. Writing HTML code:

<nav class="navbar">
<div class="title">CWR</div>
<div class="ham" >
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</div>
<ul class="nav-sub">
<li class="list-item"><a href="#" class="nav-link">Home</a></li>
<li class="list-item"><a href="#" class="nav-link">Blogs</a></li>
<li class="list-item"><a href="#" class="nav-link">About me</a></li>
</ul>
</nav>

In the above code snippet at the top, we’ve declared <nav> tag with the class navbar which will hold all the elements of our header. Let’s split the header into 3 parts for an easier understanding.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Title – that will hold our site name.
Ham- which will contain the config for the hamburger menu.
Nav-sub- which will have the links of the navigation.
Today we’ll only focus on how to create the hamburger menu. In the HTML part, we only have to define a div element (which will contain the hamburger menu) and 3 span elements (each representing the iconic line for the hamburger menu).

There is all the HTML code for the Hamburger Menu javascript. Now, you can see output without CSS, then we write CSS for our Hamburger Menu javascript.

Output

 
Hamburger Menu Using HTML,CSS and JavaScript
Hamburger Menu Using HTML,CSS and JavaScript

2. Writing CSS :

Let’s start by defining the CSS properties of the NavBar And The Title.

*{
margin:0;
color:white;
}
.title{
cursor:pointer;
}
/*Properties for Nav-bar*/
.navbar{
display:flex;
top:0;
height:10vh;
justify-content:space-between;
align-items:center;
padding:0px 20px;
background:grey;
}

Now let’s move on to our list of navbar.

Responsive Login Page in HTML with CSS Code

.nav-sub{
display:flex;
justify-content:space-between;
}
.list-item {
padding:10px;
list-style:none;
}
.nav-link{
color:inherit;
text-decoration:none;
}

this is a simple code of css for creating basic styling in the hamburger menu.

@media only screen and (max-width:768px){
*{
overflow:hidden;
}
.nav-sub{
position:absolute;
top:10vh;
right:0px;
flex-direction:column;
background-color:rgb(0,0,0,0.75);
border-radius:0px 0px 0px 20px;
transition:transform 0.3s ease-in;
transform:translate(100%);
}
.nav-change{
transform:translate(0%);
}
.ham{
display:block;
}
.change .bar1 {
transform: rotate(45deg) translate(8px,3px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: rotate(-45deg) translate(8px,-3px);
}
}

this is the whole css code for the hamburger menu. you can see there’s output with html and css code output.after this output we write javascript for hamburger menu.
 

Hamburger Menu Using HTML,CSS and JavaScript
Hamburger Menu Using HTML,CSS and JavaScript

3. Writing JS Code:

To finish our Hamburger menu and make all the elements function as we want them to,
let’s add write javascript code for it.

10+ HTML CSS Projects For Beginners (Source Code)

ADVERTISEMENT

ADVERTISEMENT

In the code below I have created two bindings named hamburger and navsub.

ADVERTISEMENT

ADVERTISEMENT

hamburger binding is used to toggle the icon from 3 lines to X and the navsub is used the making the navbar  appear and disappear when the icon is clicked.

ADVERTISEMENT

const hamburger = document.querySelector(".ham");
const navsub = document.querySelector(".nav-sub");
hamburger.addEventListener('click', () => {
hamburger.classList.toggle("change")
navsub.classList.toggle("nav-change")
});

Restaurant Website Using HTML and CSS

You Can Test below how this whole project work
 
 

Hamburger Menu Using HTML,CSS and JavaScript

Hamburger Menu Using HTML,CSS and JavaScript

Summary:

We have successfully created our Hamburger menu along with a navbar. Although there are multiple ways to apply the hamburger menu instead of using that span tags. If you have any queries please ask in the comments.

Let me know in the comments below which way do you prefer for the Hamburger menu.
Written by: @Om Bandiwan

Telegram Group Join Now

This Post Has 6 Comments

  1. J

    for me the hamburger menu does not open the list once clicked

  2. Anonymous

    sir this is helpful
    thanks sir

  3. Anonymous

    same here; does not open when clicking the the tab.
    the inspector shows an error : Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    thx

  4. Anonymous

    very helpful bahut bahut dhanyavad dil se

  5. Anonymous

    nice

  6. Anonymous

    thanks

Leave a Reply