Simple Way: How to create Hamburger Menu Animation 2022 Effect

by stackdeveloping
0 comment 136 views 10 read
hamburger menu animation

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

#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

Soon you will see post related with:

  1. Hamburger menu animation React
  2. tailwind hamburger menu animation

Other examples you may find on:

  1. hamburger menu animation W3Schools
  2. hamburger menu animation CodePen

You may also like

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More