Burger menu animation with CSS and JavaScript

In this blog you will learn how to animate a burger menu with pure CSS and JavaScript.

First let's create a burger in HTML.

		<div class="burger-menu">
	<div class="burger-line"></div>
	<div class="burger-line"></div>
	<div class="burger-line"></div>
</div>

And here is the style for burger menu.

.burger-menu {
	display: inline-block;
	width: 25px;
    cursor: pointer;
}
.burger-line {
	height: 3px;
    margin-bottom: 3px;
    background: #4d4d4d;
    transition: all .4s ease /* important for animation */
}

The HTML and CSS code above will create this burger: 

To animate the burgers line we need to toggle a class on burger-menu click with JavaScript and add another CSS code for animation.

For click event we can use this pure JavaScript code:

let element = document.getElementsByClassName("burger-menu")[0];
element.onclick = function() {
	this.classList.toggle("active");
}

We are just toggling active class on burger-menu element and now we just need to add the CSS animation:

.burger-menu.active .burger-line:last-child {
	opacity: 0;
}
.burger-menu.active .burger-line:first-child {
	transform: rotate(45deg) translate(4px, 4px);
}
.burger-menu.active .burger-line:nth-child(2) {
	transform: rotate(-45deg);
}

You can find the complete example here: codepen.io/xhuljan123/pen/rNMJrOd