The hamburger menu has become a ubiquitous symbol of mobile navigation, offering a clean and compact way to toggle menu visibility. In this tutorial, we’ll dive into the process of creating a hamburger menu from scratch using HTML, CSS, and JavaScript. By the end of this guide, you’ll have a fully functional and responsive hamburger menu ready to enhance your website’s user experience.
Step #1: Set Up the HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Hamburger Menu</title>
</head>
<body>
<div class="hamburger_menu">
<div class="hamburger_bar"></div>
</div>
<script src="script.js"></script>
</body>
</html>Step #2: Style the Hamburger Menu with CSS
*,
::before,
::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width:100%;
height:100vh;
background:#475472 ;
position: relative;
}
.hamburger_menu{
width:40px;
height:30px;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.hamburger_bar{
height:5px;
width:100%;
background: #fff;
border-radius: 100vh;
position: absolute;
transition: all .3s ease-in-out;
}
.hamburger_bar::before{
content: "";
width:100%;
height:5px;
background: #fff;
border-radius: 100vh;
position: absolute;
top:-8px;
transition: all .3s ease-in-out;
}
.hamburger_bar::after{
content: "";
width:100%;
height:5px;
background: #fff;
border-radius: 100vh;
position: absolute;
bottom: -8px;
transition: all .3s ease-in-out;
}
/* Animation for the hamburger menu */
.open .hamburger_bar {
background: transparent;
}
.open .hamburger_bar::before {
transform: rotate(-45deg);
top: 0;
}
.open .hamburger_bar::after {
transform: rotate(45deg);
bottom: 0;
}
Step #3: Add JavaScript Functionality
const hamburgerMenu = document.querySelector('.hamburger_menu')
hamburgerMenu.addEventListener('click', (e) => {
e.currentTarget.classList.toggle('open')
console.log(e.target.classList)
})Output:-
Hopefully, It will help you…!!!
