Contents
How we can make Hamburger Menu ?
Hamburger Menu Animation CSS – Today we are posting a wonderful effect that anyone need it to use for his site. When everyone is about to make the site responsible version for mobile they always need an unique NavBar Button Hamburger. So today we are posting to you this. As first we have to build an simple HTML document, with a simple element for hamburger menu animation demonstration.
HTML Part
<!-- HTML Document for hamburger menu -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger Menu Animation</title>
<!- Here We will add the style -->
</head>
<body>
<div class="main">
<div id="navMenu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!- Here we will add the script -->
</body>
</html>
HTML Document
So above we have created an HTML document, with an element <div class=’navMenu’> which will get all styling attributes to be an Hamburger button. So for the hamburger we nee 3 <span> elements that will get the same style. The first part of the style will be how the element looks before click event.
Default CSS Part
/** Default style for hamburger menu */
.main{
display: flex ;
flex-direction: row;
}
#navMenu > span{
display: block ;
width: 28px;
height: 2px;
border-radius: 99999px;
background-color: #000;
}
#navMenu > span:not(:last-child){
margin-bottom: 7px;
}
#navMenu, #navMenu>span{
transition: all .4s ease-in-out;
}
.main Class
So .main element we are giving an display flex property since its the most modern way for displaying the elements in the html document. #navMenu > span this mean that all span elements that are children of #navMenu parent, will have properties like, display – block, with will be optional size 28px(Pixel), but you can choose to any size you want. Height will make the element visible, and it will be like 2px, but you can choose your own size also for that.
#navMenu > span:not(:last-child) – this mean that all span elements will have the margin bottom 7px except the last span element. #navMenu, #navMenu>span this mean that elements separated by comma will have same effect if over this element will applied any action like :focus, :hover or any other effect, this will be with transition effect depending by the time execution.
Active CSS Style
/**Active Style for hamburger menu */
#navMenu.active{
transition-delay: 0.8s;
transform: rotate(45deg);
}
#navMenu.active>span:nth-child(2){
width: 0;
}
#navMenu.active >span:nth-child(1),
#navMenu.active >span:nth-child(3){
transition-delay: .4s;
}
#navMenu.active >span:nth-child(1){
transform: translateY(9px);
}
#navMenu.active >span:nth-child(3){
transform: translateY(-9px) rotate(90deg);
}
transform: rotate(45deg)
On above code everything will be related to a class selector called “active”, but this you can call it as you wish, enough to be selected after then with Javascript selector. #navMenu.active will have time of animation or transition 0.8 seconds , transform: rotate(45deg) – this will transform the element once it will have activated the .active class, the transformation will come as rotated on 45deg. #navMenu.active>span:nth-child(2) – This will referred to the second line or second span element, so when an element have activated the .active class second span element will go to 0 width. #navMenu.active >span:nth-child(1),#navMenu.active >span:nth-child(3) – the first and the 3rd element will forced the transition time to 0.4 second.
#navMenu.active >span:nth-child(1){ transform: translateY(9px);}
#navMenu.active >span:nth-child(3){ transform: translateY(-9px) rotate(90deg);}
The 2 lasts selection will make the first element to move by Y axe by 9 Pixels and the second selection will move also the 3rd element 9PX according to Y axe.
const navMenu= document.querySelector("#navMenu");
navMenu.addEventListener("click",()=>{
navMenu.classList.toggle("active");
});
On Above code we have show that how we will get give the class ‘active’ to our menu, via javascript at our hamburger menu animation
The demonstration of the effect
For more we offer for free to download our file. Please click the link Hamburger Menu Animation 2022 Effect
Please Try it now in our Online Editor
Also you will find
- Hamburger menu animation React
- tailwind hamburger menu animation
Other examples you may find on:
- hamburger menu animation W3Schools
- hamburger menu animation CodePen