HEADER ADS 728X90

How To Make Animated Hamburger Menu Using HTML CSS And Javascript || Code Prime

hamburger menu,animated hamburger toggle,animated hamburger menu,animate hamburger to cross,css hamburger menu,transforming hamburger menu,hamburger menu design,hamburger menu css,javascript,pure css hamburger menu,css hamburger menu icons,hamburger menu animation,how to create hamburger menu,animated css toggle menu,hamburger menu button,hamburger menu icon css,animated hamburger menu css,animated menu icon,hamberger animated menu bar without javascript,hamburger menu,css hamburger menu,hamburger menu tutorial,hamburger,pure css hamburger menu,css hamburger menu icons,hamburger menu animation,hamburger icon,menu,hamburger menu css,hamburger menu wix,hamburger menu icon,react hamburger menu,hamburger menu react,hamburger menu design,hamburger menu button,what is hamburger menu,css hamburger menu bar,#figma hamburger menu,divi menu hamburger,hamburger menu icon css,hamburger menu adobe xd,css animation,css animation effects,css,css animation tutorial,html,css animations,animation,latest css animation effects,css effects,css loading animation,css animation examples,html css animation,html css,css3 animation,css loader animation,html and css,css animation slide,css animation effect,css animation example,css effects animation,animation using css,css animation tutorials,css animation keyframes,top css animation effects,code prime, coding tutorial, how to learn coding easy way to learn coding

Hi dear welcome to "Code Prime" Blog . In this post we are going to learn how to make animated hamburger menu using html css and javascript. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it. 3rdly creat Ap.jss file Then Copy The Javasceipt CODE then open the index.html file with your browser.

HTML

<!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>Animated Hamburger Menu</title>
    <link rel="stylesheet" href="hamburger.css">
    <script src="ap.js"></script>
</head>
<body>

    <div class="container">
        <div class="menu" id="menu1">
            <div>
                <span class="bar-1"></span>
                <span class="bar-2"></span>
                <span class="bar-3"></span>
            </div>
        </div>

        <div class="menu2" id="menu2">
            <div>
                <span class="bar-1"></span>
                <span class="bar-2"></span>
                <span class="bar-3"></span>
            </div>
        </div>
    </div>

</body>
</html>
   

CSS

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #fff;
}
.menu, .menu2 {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, #f09, #111);
    border-radius: 5px;
    margin: 5%;
}

.menu div, .menu2 div{
    position: relative;
    width: 120px;
    height: 120px;
    /* background: #fff; */
    margin: 40px;
}
.menu span, .menu2 span{
    position: absolute;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.5s, width 0.5s;
}

.menu .bar-1{
    transform: translate(-50%, -50px);
}
.menu .bar-3{
    transform: translate(-50%, 40px);
}

.changebtn-1 .bar-1{
    transform: translate(-50%, -50%) rotate(-45deg);
}
.changebtn-1 .bar-2{
    width: 0;
}
.changebtn-1 .bar-3{
    transform: translate(-50%, -50%) rotate(45deg);
}

/* menu 2 */

.menu2 .bar-1{
    width: 50%;
    transform: translate(-100%, -50px);
}
.menu2 .bar-3{
    width: 50%;
    left: auto;
    right: 0;
    transform: translate(0, 40px);
}

.changebtn-2 .bar-1{
    transform-origin: 0 0;
    transform: translate(0,0) rotate(-45deg);
}
.changebtn-2 .bar-2{
    transform: translate(-50%,-50%) rotate(45deg);
}
.changebtn-2 .bar-3{
    transform-origin: 100% 0;
    transform: translate(-100%,-50%) rotate(-45deg);
}

Javascript

 var menu = document.getElementById('menu1');
        var menu2 = document.getElementById('menu2');

        menu.onclick = function(){
            menu.classList.toggle('changebtn-1')
        };
        menu2.onclick = function(){
            menu2.classList.toggle('changebtn-2')
        };

Youtube Tutorial

FLOW US ON SOCIAL MEDIA

Post a Comment

0 Comments

Join Telegram