Hamburger Menu html css javascript | hamburger menu code

Hamburger Menu html css javascript | hamburger menu code





Hamburger menu has become an std icon for Navigation, it has become so popular the even most mainstream platforms and apps use them nowadays.

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


Hamburger Menu html css javascript | hamburger menu code



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.


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 ado, Let's get right into it.


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.
  1. Title - that will hold our site name.
  2. Ham- which will contain the config for the hamburger menu.
  3. 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 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 html css javascript | hamburger menu code

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.

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

And lastly, it's time to define the properties of our hamburger menu.

In the .ham class selector we have set display to none as we don't want the hamburger icon appear until the screen has certain conditions.(we will be defining them a bit later)

 /*Properties for Hamburger*/  
 .ham{  
  display:none;  
  padding:5px;  
  cursor:pointer;  
 }  
 .bar1,.bar2,.bar3{  
  display:block;  
  width:35px;  
  height:3px;  
  margin:5px auto;  
  background-color:#101010;  
  transition: 0.4s;  
 }  


But we haven't made this whole thing responsive yet as you can notice in the clip below.



For it to appear properly on the small devices, we need to further declare media queries properties.

In the media query, I have set the max-width to 768px .You can go ahead and make another media query for the tablets ratio. If you want to learn more about media query you can visit here

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

After applying the media query properties the navbar should appear as follows on smaller devices.


Hamburger Menu html css javascript | hamburger menu code


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.

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

After this it should work as following clip:



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

Post a Comment

Previous Post Next Post