How to create an animated hamburger menu icon using only HTML, CSS, and JavaScript — without external templates or libraries. Let’s start with the markup, add styles, and finish with a script to handle interaction.
HTML Code for the Hamburger Menu
The HTML structure is very straightforward. We need a wrapper element .container that centers the parent element .menu-icon, which represents the hamburger menu icon. The .menu-icon block contains three nested <span> elements that visually form the three bars of the hamburger icon:
<div class="container">
<div class="menu-icon">
<span></span>
<span></span>
<span></span>
</div>
</div>CSS Wrapper
The wrapper ensures that the icon is positioned in the center of the viewport:
:root {
background-color: #333;
}
.container {
width: 100%;
height: 100vh;
display: flex;
}Hamburger Menu Icon
With display: grid, we can easily center the nested <span> elements within the .menu-icon parent container. The property place-items: center is a shorthand for align-items: center and justify-items: center.
.menu-icon {
margin: auto;
display: grid;
place-items: center;
height: 55px;
width: 55px;
cursor: pointer;
overflow: hidden;
}SPAN Elements
Now we’ll style the <span> elements that represent the lines of the hamburger menu. This gives our icon a distinct and modern look:
.menu-icon > span {
width: 50px;
height: 3px;
display: block;
background-color: red;
transition: all 0.3s ease-in-out;
justify-self: end;
}
.menu-icon > span:nth-child(1) {
width: 42px;
}
.menu-icon > span:nth-child(2) {
width: 35px;
}Each line is aligned to the right edge of the parent block and has a different length for a more dynamic appearance.
Hover Effect
When hovering over the icon, we’ll change the width of the first and second lines. The transition property provides a smooth animation effect.
.menu-icon:hover > span:nth-child(1) {
width: 30px;
}
.menu-icon:hover > span:nth-child(2) {
width: 40px;
}Animation on Click
Now for the most interesting part. We’ll transform the first and third lines into an “X” shape by changing their position, length, and rotation. The middle line will slide out of view.
.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 .menu-icon. As a result, the first and third lines rotate using the rotate and translate transformations, while the middle line moves out of view with translateX.
JavaScript for the Hamburger Menu
We’ll 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);You now have a fully functional animated hamburger menu icon built entirely with clean HTML, CSS, and JavaScript. This solution can be easily integrated into any project and customized — for example, by changing the color, size, or animation style to match your design.
