Animated Hamburger Menu Icon HTML CSS

Animated hamburger menu icon HTML created by using JavaScript and custom CSS. Hamburger icon we can use as navbar menu toggle whereby navigation menus will show when we click on the menu toggle.

HTML

<div id="toggle-icon" onclick="clickFunction()">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
</div>

CSS

#toggle-icon {
    cursor: pointer;
    margin: 100px auto;
    display: table;
}
.bar1, .bar2, .bar3 {
    background-color: #3f51b5;
    width: 40px;
    height: 4px;
    transition: 0.5s;
    margin: 7px 0;
}
.rotate-icon .bar1 {
    -webkit-transform: rotate(-45deg) translate(-8px, 6px);
    transform: rotate(-45deg) translate(-8px, 6px);
}
.rotate-icon .bar2 {
    opacity: 0;
}
.rotate-icon .bar3 {
    -webkit-transform: rotate(42deg) translate(-9px, -8px);
    transform: rotate(42deg) translate(-9px, -8px);
}

JavaScript

function clickFunction() {
    var para = document.getElementById("toggle-icon");
    para.classList.toggle("rotate-icon");
}