How to create Hamburger menu animation

Hello Friends,

Today in this blog you’ll learn how to create hamburger menu animation Previously I have shared a How to create 3D flip effect section now it’s time to create a hamburger menu animation using HTML,CSS and Javascript.

In that tutorial you have seen how to create hamburger menu animation. I used the CSS for styling and javascript for effect.

If you like this program (Custom Design) and want to get source code. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

See also  A Collection Of Cross-browser CSS Box Shadows - Box-shadows.css


If you need the same background images and icons on your website you can Download Image.

<!DOCTYPE html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
<html>
    <head>
        <link rel="stylesheet" href="pro3.css" type="text/css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans">
        <title>Hamburger menu animation </title>
    </head>
    <body>
        <div id="menu-bar" >
            <div id="menu"onclick="onClickMenu()">
                <div id="bar1" class="bar"></div>
                <div id="bar2" class="bar"></div>
                <div id="bar3" class="bar"></div>
            </div>
        <ul class="nav" id="nav">
            <li><a href="../Project4/proje4.html">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Graphic</a></li>
            <li><a href="#">Help</a></li>
        </ul>
        </div>
        <div class="menu-bg" id="menu-bg"></div>
        <script src="script.js"></script>

    </body>
</html>
/** code by CodeitHub ( https://CodeitHub.com ) **/
body{
    font-family:'PT Sans', sans-serif;
    background-color:#373c56;
}
#menu{
    width:35px;
    height:30px;
    margin:30px 0 20px 20px;
    cursor: pointer;
}
.bar{
    height: 5px;
    width:100%;
    background-color: #b81568;
    display:block;
    border-radius: 5px;
    transition:0.3s ease;
}
#bar1{
    transform: translateY(-4px);
}
#bar3{
    transform:translateY(4px);
}
.nav li a{
    color:#fff;
    text-decoration: none;
}
.nav li a:hover{
    font-weight: bold;
}
.nav li{
    list-style: none;
    padding: 16px 0;
}
.nav{
    padding:0;
    margin:0 20px;
    transition:0.3s ease;
    display:none;
}
.menu-bg, #menu-bar{
    top:0;
    left:0;
    position: absolute;
}
.menu-bg{
    z-index: 1;
    width: 0;
    height:0;
    margin: 30px 0 20px 20px;
    background: radial-gradient(circle,#e94498,#b81568);
    border-radius: 50%;
    transition:0.3s ease;
}
#menu-bar{
    z-index: 2;
}
.change-bg{
    width:550px;
    height:540px;
    transform: translate(-60%,-30%);
}
.change .bar{
    background-color: white;
}
.change #bar1{
    transform: translateY(4px) rotate(45deg);
}
.change #bar3{
    transform: translateY(-6px) rotate(-45deg);
}
.change #bar2{
    opacity: 0;
}
.change{
    display:block
}
function onClickMenu(){
    document.getElementById("menu").classList.toggle("change");
    document.getElementById("nav").classList.toggle("change");
    document.getElementById("menu-bg").classList.toggle("change-bg");
}

Output

Leave a Reply

Your email address will not be published. Required fields are marked *