CodePen Embed - Hamburger to close button

<body>
    <div class="menu">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
 
</body>

body{
    margin: 0px;
    height: 100vh;
}
.menu{
    height: 100px;
    width:100px;
    background-color: white;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

}
.bar1{
    left: 0px;
    width: 100%;
    height: 10px;
    background-color: black;
    position: absolute;
    top: 0px;
    transition: transform 0s;
    transition: all 0.1s;
    
}
.bar2{
    
    width: 100%;
    height: 10px;
    background-color: black;
    position: absolute;
    top: 50px;
    transition: transform 0s;
    transition: all 0.1s;
    left: 0px;

    
    
}
.bar3{
    right: 0px;
    width: 100%;
    height: 10px;
    background-color: black;
    position: absolute;
    top: 100px;
    transition: transform 0s;
    transition: all 0.1s;
    
    
}

var menustate =0;

document.querySelector(".menu").addEventListener("click",()=>{
    if(menustate===0){
        document.querySelector(".bar1").style.width="5%";
        document.querySelector(".bar3").style.width="5%";
        document.querySelector(".bar2").style.width="5%";
        document.querySelector(".bar2").style.left="47.5%";
        setTimeout(() => {
            document.querySelector(".bar1").style.transform="rotateZ(45deg)";
            document.querySelector(".bar3").style.transform="rotateZ(45deg)";
            document.querySelector(".bar2").style.transform="rotateZ(135deg)";
            setTimeout(() => {
                document.querySelector(".bar3").style.top="50%";
                document.querySelector(".bar1").style.top="50%";
                document.querySelector(".bar1").style.width="100%";
                document.querySelector(".bar3").style.width="100%";
                document.querySelector(".bar2").style.left="0px";
                document.querySelector(".bar2").style.width="100%";
            }, 50);
    
        }, 100);
        menustate=1;

    }else{
        document.querySelector(".bar1").style.top="0%";
        document.querySelector(".bar3").style.top="100px";
        document.querySelector(".bar1").style.width="5%";
        document.querySelector(".bar3").style.width="5%";
        document.querySelector(".bar2").style.left="47.5%";
        document.querySelector(".bar2").style.width="5%";
        setTimeout(() => {
            document.querySelector(".bar1").style.transform="rotateZ(0deg)";
            document.querySelector(".bar3").style.transform="rotateZ(0deg)";
            document.querySelector(".bar2").style.transform="rotateZ(0deg)";
            setTimeout(() => {
                document.querySelector(".bar1").style.width="100%";
                document.querySelector(".bar3").style.width="100%";
                document.querySelector(".bar2").style.width="100%";
                document.querySelector(".bar2").style.left="0%";
            }, 50);
    
        }, 100);
        menustate=0;
    }

    



});

This Pen is owned by Gaurav Patil on CodePen.

See more by @gaurav_codes on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.