Introduction:
Responsive navigation menus enhance user experience, especially on mobile devices. In this tutorial, you will build a animated menu icon feature using HTML, CSS and JavaScript. By the end, your menu will open and close with a smooth toggle effect when the user interacts with a hamburger icon.
Things You Will Learn:
- Creating a responsive navigation bar
- Using JavaScript to toggle CSS classes
- Handling click events for interactive elements
- Improving mobile user experience
Video Tutorial:
I would suggest you to watch the video down below for better understanding on we have implemented the functionality of this project. If you find the video helpful give it a like and subscribe to my YouTube channel where I post new tips, tricks and tutorials related to HTML, CSS and Javascript.
Project Folder Structure:
Before we start coding we take a look at the project folder structure. We start by creating a folder called – ‘Animated Menu Icon’. Inside this folder we have 3 files. These files are :
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animated Menu Icon</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="menu-icon" onclick="toggleMenu(this)">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
Now, let’s style the page. Copy the CSS code below and paste it into your stylesheet.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}
.menu-icon {
width: 30px;
height: 25px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.line {
width: 100%;
height: 4px;
background-color: #333333;
border-radius: 4px;
transition: transform 0.4s ease, opacity 0.4s ease;
}
.menu-icon.active .line {
transform: translateY(10px) rotate(45deg);
}
.menu-icon.active .line2 {
opacity: 0;
}
.menu-icon.active .line3 {
transform: translateY(-10px) rotate(-45deg);
}
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
function toggleMenu(icon) {
icon.classList.toggle("active");
}
Conclusion:
You built a mobile menu toggle feature using HTML, CSS, and JavaScript. This project taught you how to use JavaScript to toggle classes dynamically, improving your web development skills. Expand this project by adding animations or adjusting the design for different screen sizes. Keep experimenting and enhancing your creations!
