Why use Hamburger Menu?

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.

1. Writing HTML Code For Hamburger Menu:

<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>

2. Hamburger Menu Css Code:-

First, let’s define the CSS properties for the Title and the NavBar. The padding and margin will be set to zero using the universal selector, and the font colour will be changed from black to white using the font colour property. The display will now be set to “flex” using the class selector (.navbar), and the elements will be centred using the align items attribute.

*{
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;
}

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

The fundamental styling of the hamburger menu may be created with this straightforward CSS code. Using the media query property, we will now make our navbar responsive. Our navbar’s position is set to “absolute” and its direction is set to “column” using the flex direction property if the screen size is less than 768 pixels. If the screen size is greater than that, we will utilise the media query selector.

@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);
}
}

3. Writing JavaScript Code For Hamburger Menu:-

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)

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

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.

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

The HTML components will be chosen in this case using the document.queryselector property, and using the addEventListener property, a click event will be added to switch between the menu and the navigation bar. The menu will modify as we click on the nav bar. We’ll be able to toggle between the navbar’s collapse and expansion with the use of the toggle function.

Restaurant Website Using HTML and CSS