In this post, I’m going to show you how to create an animated hamburger menu icon using CSS and JavaScript. The hamburger menu icon is used in the responsive navbar on the website.
You can create three different pages and link them. Or, write all on a single page.
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Hamburger Menu</title>
</head>
<body>
<!-- Hamburger Menu Started-->
<div id="menuBtn" class="menu-btn">
<div class="burger_menu-btn"></div>
</div>
<!-- Hamburger Menu Ended-->
<script src="script.js"></script>
</body>
</html>
CSS (style.css)
body {
background-color: gray;
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100px; /*Adjust accordingly*/
height: 100px; /*Adjust accordingly*/
cursor: pointer;
transition: all 0.7s ease-in-out;
}
.burger_menu-btn {
width: 50px;
height: 6px;
background-color: #ffffff;
border-radius: 5px;
transition: all 0.5s ease-in-out;
}
.burger_menu-btn::before,
.burger_menu-btn::after {
content: "";
position: absolute;
width: 50px;
height: 6px;
background-color: #ffffff;
border-radius: 5px;
transition: all 0.5s ease-in-out;
}
.burger_menu-btn::before {
transform: translateY(-15px);
}
.burger_menu-btn::after {
transform: translateY(15px);
}
.menu-btn.open .burger_menu-btn {
transform: translateX(-50px);
background: transparent;
}
.menu-btn.open .burger_menu-btn::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .burger_menu-btn::after {
transform: rotate(-45deg) translate(35px, 35px);
}
JavaScript (script.js)
let menuBtn = document.getElementById("menuBtn");
let menuOpen = false;
menuBtn.addEventListener("click", () => {
if (!menuOpen) {
menuBtn.classList.add("open");
menuOpen = true;
} else {
menuBtn.classList.remove("open");
menuOpen = false;
}
});
Combined HTML, CSS and JavaScript (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hamburger Menu</title>
<style>
body {
background-color: gray;
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100px; /*Adjust accordingly*/
height: 100px; /*Adjust accordingly*/
cursor: pointer;
transition: all 0.7s ease-in-out;
}
.burger_menu-btn {
width: 50px;
height: 6px;
background-color: #ffffff;
border-radius: 5px;
transition: all 0.5s ease-in-out;
}
.burger_menu-btn::before,
.burger_menu-btn::after {
content: "";
position: absolute;
width: 50px;
height: 6px;
background-color: #ffffff;
border-radius: 5px;
transition: all 0.5s ease-in-out;
}
.burger_menu-btn::before {
transform: translateY(-15px);
}
.burger_menu-btn::after {
transform: translateY(15px);
}
.menu-btn.open .burger_menu-btn {
transform: translateX(-50px);
background: transparent;
}
.menu-btn.open .burger_menu-btn::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .burger_menu-btn::after {
transform: rotate(-45deg) translate(35px, 35px);
}
</style>
</head>
<body>
<!-- Hamburger Menu Started-->
<div id="menuBtn" class="menu-btn">
<div class="burger_menu-btn"></div>
</div>
<!-- Hamburger Menu Ended-->
<script>
let menuBtn = document.getElementById("menuBtn");
let menuOpen = false;
menuBtn.addEventListener("click", () => {
if (!menuOpen) {
menuBtn.classList.add("open");
menuOpen = true;
} else {
menuBtn.classList.remove("open");
menuOpen = false;
}
});
</script>
</body>
</html>
Output

Pingback: 10 Websites to boost your Frontend skills - Sajan Kc