How to Create Hamburger Menu Using CSS and JavaScript Code
Hello Coder! Welcome to the Codewithrandom Blog. In this Article, We Create Hamburger Menu Using Html, CSS and JavaScript 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.
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.
Code by | Om Bandiwan |
Project Download | Link Available Below |
Language used | HTML, CSS and JavaScript |
External link / Dependencies | No |
Responsive | No |
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>
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.
Home- 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.
Only Output Code Output:-
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.
ADVERTISEMENT
ADVERTISEMENT
*{ 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; }
ADVERTISEMENT
Let’s now discuss our list of navbars. The content will be justified using the class selector.nav-sub to give it equal space, and the list item will be given 10 px of padding in addition to inheriting the colour for the list items.
ADVERTISEMENT
Responsive Login Page in HTML with CSS Code
ADVERTISEMENT
.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
Final Output Of Hamburger Menu:-
Video Output Of Hamburger Menu:
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
What is a navigation bar?
A Navigation bar is a section generally found on the top of the website which provide an user an ease of use .It provides number of links which helps user to move through the different section of the website.
What is the main purpose of the navigation bar?
A navigation bar’s main purpose is to make it easier for website visitors to browse. The navigation bar makes it simple for the user to obtain information.The navigation bar provides user to acess the different section inside the website easily.
for me the hamburger menu does not open the list once clicked
sir this is helpful
thanks sir
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
very helpful bahut bahut dhanyavad dil se
nice
thanks