In this tutorial, I will show you how to create a hamburger menu using HTML, CSS, and JavaScript. The hamburger menu is a popular navigation design pattern that consists of three horizontal lines that resemble a hamburger.
Step 1: Create the HTML structure
First, create an HTML file and add the following code to create the basic structure for our hamburger menu.
<!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="styles.css">
<title>Hamburger Menu</title>
</head>
<body>
<div class="hamburger-menu">
<div class="hamburger-icon">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>Step 2: Style the hamburger menu with CSS
Next, create a CSS file named styles.css and add the following code to style our hamburger menu.
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.hamburger-menu {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #333;
color: white;
}
.hamburger-icon {
width: 30px;
height: 20px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}
.line {
width: 100%;
height: 2px;
background-color: white;
}
.menu {
list-style: none;
display: none;
}
.menu.open {
display: flex;
flex-direction: column;
background-color: #333;
position: absolute;
top: 60px;
left: 0;
width: 100vw;
}
.menu li {
padding: 15px;
border-bottom: 1px solid #555;
}
.menu a {
color: white;
text-decoration: none;
}Step 3: Implement the functionality with JavaScript
Lastly, create a JavaScript file named script.js and add the following code to toggle the opening and closing of the menu when the hamburger icon is clicked.
const hamburgerIcon = document.querySelector('.hamburger-icon');
const menu = document.querySelector('.menu');
hamburgerIcon.addEventListener('click', () => {
menu.classList.toggle('open');
});That’s it! You have created a simple hamburger menu using HTML, CSS, and JavaScript. You can customize the styles and functionality to fit your needs. Give it a try and let me know if you have any questions or run into any issues.
Video Link – https://youtu.be/0yrGaV1ZVoM