DEV Community

Cover image for Hamburger Menu html css javascript | hamburger menu code
Codewith Random
Codewith Random

Posted on

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.

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>  
Enter fullscreen mode Exit fullscreen mode

In the above code snippet at the top, we've declared 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.
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).

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;  
 }  
Enter fullscreen mode Exit fullscreen mode

For reading full article visit our website! Thank you 🙏💕
https://www.codewithrandom.com/2021/08/hamburger-menu-hamburger-menu-with.html

Discussion (0)