How to Create an Animated Hamburger Menu Icon Using Only HTML, CSS, and JavaScript

In this guide, we will create an animated hamburger menu icon without using any external templates or libraries. We will start with the markup, add styles, and complete it with a script for interaction.

Contents

HTML Code for the Hamburger Menu
CSS Wrapper
Hamburger Menu Icon
Styling the Span Elements
Hover Effect
Click Animation
JavaScript for the Hamburger Menu

HTML Code for the Hamburger Menu

The HTML code is quite simple: we need a .container wrapper with a .menu-icon element centered inside it. The .menu-icon element contains three span elements that form the graphical representation of the icon:

<div class="container">
<div class="menu-icon">
<span></span>
<span></span>
<span></span>
</div>
</div>

CSS Wrapper

The wrapper block is used to center the icon:

:root {
background-color: #333;
}

.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

Using grid, we can easily center the span elements within the parent .menu-icon block. The place-items: centersyntax simplifies this by combining align-items: center and justify-items: center.

.menu-icon {
display: grid;
place-items: center;
height: 55px;
width: 55px;
cursor: pointer;
overflow: hidden;
}

Styling the Span Elements

We style the span elements, which represent the lines of the hamburger menu icon. This adds originality to our solution:

.menu-icon > span {
width: 50px;
height: 3px;
display: block;
background-color: red;
transition: all 0.3s ease-in-out;
}

.menu-icon > span:nth-child(1) {
width: 42px;
}

.menu-icon > span:nth-child(2) {
width: 35px;
}

All lines are aligned to the right edge of the parent block and have different lengths.

Hover Effect

When hovered over, we change the length of the first and second lines, with a transition creating a smooth animation.

.menu-icon:hover > span:nth-child(1) {
width: 30px;
}

.menu-icon:hover > span:nth-child(2) {
width: 40px;
}

Click Animation

Now for the most interesting part. We will change the position, length, and angle of the first and third lines to form an “X” shape. The middle line will be hidden.

.menu-icon.active span:nth-child(1) {
transform-origin: center center;
transform: rotate(-45deg) translate(-20%, 500%);
width: 55px;
}

.menu-icon.active span:nth-child(2) {
transform: translateX(40px);
}

.menu-icon.active span:nth-child(3) {
transform-origin: center center;
transform: rotate(45deg) translate(-20%, -500%);
width: 55px;
}

When the icon is clicked, the .active class is added to the .menu-icon. As a result, the first and last lines rotate and move accordingly using rotate and translate, while the middle line moves out of view to the right using translateX.

Finally, we add a simple script to toggle the .active class when the icon is clicked.

const menuIcon = document.querySelector('.menu-icon');

function toggleMenuIcon() {
menuIcon.classList.toggle('active');
}

menuIcon.addEventListener('click', toggleMenuIcon);

Now you have a fully functional animated hamburger menu icon created with pure CSS and JavaScript. You can easily integrate this code into your project and modify it to suit your needs, such as changing the color, size, or animation