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.
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;
}Hamburger Menu Icon
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.
JavaScript for the Hamburger Menu
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