Creating a responsive navigation menu is an essential part of any website design. In this blog post, we will be going over how to create a dropdown hamburger menu using HTML, CSS, and JavaScript.
The HTML code for our menu is quite simple. We start off by creating a div with a class of “menu”. Inside of this div, we add another div with a class of “hamburger” which will act as our trigger button. Inside of the “hamburger” div, we add three div elements with a class of “line” which will be used to create the three lines that make up the hamburger icon. Finally, we add a ul element with a class of “dropdown” which will contain our menu items.
Learn how to create a responsive dropdown hamburger menu for your website using HTML, CSS, and JavaScript in this step-by-step tutorial. This navigation menu is easy to implement and can help make your website more user-friendly. Perfect for beginners and those looking to improve their web development skills.”
<nav class="menu">
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="dropdown">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<header>
<h1>Burger</h1>
<img src="hamburger.svg" alt="" />
</header>
Next, we will use CSS to style our menu. We start by giving our “menu” div a fixed position and setting it to the top and left of the screen. We then style the “hamburger” div to display as a flex container and give it a cursor of “pointer” to indicate that it is clickable. We also style the “line” div elements to create the hamburger icon.
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
body {
font-family: sans-serif;
background: #3a5479;
color: #fff;
}
header {
margin-left: calc(100vw - 70%);
}
header h1 {
font-size: 8rem;
margin: 2.5rem;
}
header img {
width: fit-content;
max-width: 600px;
}
.menu {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100vw;
}
.hamburger {
display: flex;
flex-direction: column;
width: 40px;
height: 30px;
margin: 20px;
justify-content: space-between;
cursor: pointer;
}
.line {
background-color: #ffff;
width: 100%;
height: 3px;
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
}
.dropdown {
display: none;
position: absolute;
top: 70px;
left: 0;
width: 120px;
padding: 20px 0 0 20px;
background-color: #bf6a40;
height: 100vh;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.dropdown.open {
display: block;
}
.dropdown li {
padding: 10px;
text-transform: uppercase;
opacity: 0;
animation: fadeIn 0.5s ease-in-out forwards;
transform: all 0.2s;
}
.dropdown li:hover {
background: #3a5479;
width: 100%;
}
.dropdown a {
color: #fff;
}
.dropdown li:nth-child(1) {
animation-delay: 0.1s;
}
.dropdown li:nth-child(2) {
animation-delay: 0.15s;
}
.dropdown li:nth-child(3) {
animation-delay: 0.3s;
}
.dropdown li:nth-child(4) {
animation-delay: 0.45s;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateX(-100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
Finally, we use JavaScript to toggle the visibility of our “dropdown” ul when the “hamburger” div is clicked. We start by selecting the “hamburger” and “dropdown” elements using the querySelector() method and then use the addEventListener() method to listen for a click event on the “hamburger” div. When the “hamburger” div is clicked, we toggle the “open” class on the “dropdown” ul which is used to control its visibility.
// console.log("nav");
const hamburger = document.querySelector(".hamburger");
const dropdown = document.querySelector(".dropdown");
console.log(hamburger, dropdown);
// hamburger.addEventListener("click", function () {
// dropdown.classList.toggle("open");
// });
hamburger.onclick = () => dropdown.classList.toggle("open");
And that’s it! With just a few lines of HTML, CSS, and JavaScript, we have created a fully functional dropdown hamburger menu. This is just a basic example and you can add more items to the menu, style it to match your website, and add more functionality as needed.
Video Tutorial on Youtube
Check out the full detailed tutorial on my YouTube Channel for the React Countdown timer.
Want to become a web developer ?
Get complete web development courses on HTML, CSS , JavaScript, Bootstrap, Visual Studio Code, Responsive design and much more…