Navigation Menus with CSS and JavaScript: Comprehensive Guide
Navigation menus are a key component of web design, offering users a way to move through a website. This guide explains how to create dynamic and responsive navigation menus using CSS and JavaScript. It includes code examples, detailed explanations, exercises, and multiple-choice questions.
Types of Navigation Menus
- Horizontal Navigation: Menus aligned horizontally at the top or bottom of the page.
- Vertical Navigation: Menus aligned vertically, often on the side of the page.
- Dropdown Menus: Menus with sub-items that expand when hovered or clicked.
- Hamburger Menus: Compact menus, often used in mobile design.
Step-by-Step: Building Navigation Menus
1. Basic Horizontal Menu
HTML:
<nav class=”nav”>
<ul>
<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>
</nav>
CSS:
.nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
background-color: #333;
}
.nav li {
margin: 0 10px;
}
.nav a {
color: white;
text-decoration: none;
padding: 10px 15px;
display: block;
transition: background-color 0.3s;
}
.nav a:hover {
background-color: #555;
}
2. Vertical Navigation Menu
HTML:
<nav class=”vertical-nav”>
<ul>
<li><a href=”#”>Dashboard</a></li>
<li><a href=”#”>Profile</a></li>
<li><a href=”#”>Settings</a></li>
<li><a href=”#”>Logout</a></li>
</ul>
</nav>
CSS:
.vertical-nav ul {
list-style: none;
padding: 0;
margin: 0;
width: 200px;
background-color: #f4f4f4;
}
.vertical-nav li {
margin: 0;
}
.vertical-nav a {
text-decoration: none;
color: #333;
display: block;
padding: 10px;
border-bottom: 1px solid #ddd;
transition: background-color 0.3s;
}
.vertical-nav a:hover {
background-color: #ddd;
}
3. Dropdown Menu
HTML:
<nav class=”dropdown-nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li>
<a href=”#”>Services</a>
<ul class=”dropdown”>
<li><a href=”#”>Web Design</a></li>
<li><a href=”#”>SEO</a></li>
<li><a href=”#”>Marketing</a></li>
</ul>
</li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
CSS:
.dropdown-nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
background-color: #333;
}
.dropdown-nav li {
position: relative;
}
.dropdown-nav a {
color: white;
text-decoration: none;
padding: 10px 15px;
display: block;
transition: background-color 0.3s;
}
.dropdown-nav a:hover {
background-color: #555;
}
.dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #444;
}
.dropdown li {
width: 150px;
}
.dropdown-nav li:hover .dropdown {
display: block;
}
4. Hamburger Menu (Responsive)
HTML:
<nav class=”hamburger-nav”>
<div class=”hamburger” id=”hamburger”>
☰
</div>
<ul class=”menu” id=”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>
</nav>
CSS:
.hamburger-nav {
position: relative;
}
.hamburger {
font-size: 24px;
cursor: pointer;
display: none;
}
.menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
background-color: #333;
}
.menu li {
margin: 0 10px;
}
.menu a {
color: white;
text-decoration: none;
padding: 10px 15px;
display: block;
}
@media (max-width: 768px) {
.hamburger {
display: block;
}
.menu {
display: none;
flex-direction: column;
}
.menu.active {
display: flex;
}
}
JavaScript:
const hamburger = document.getElementById(“hamburger”);
const menu = document.getElementById(“menu”);
hamburger.addEventListener(“click”, () => {
menu.classList.toggle(“active”);
});
Detailed Examples
Example 1: Highlight Active Menu Item
Highlight the currently active menu item.
const links = document.querySelectorAll(“.nav a”);
links.forEach((link) => {
link.addEventListener(“click”, (e) => {
links.forEach((item) => item.classList.remove(“active”));
e.target.classList.add(“active”);
});
});
CSS:
.nav a.active {
background-color: #007bff;
}
Example 2: Smooth Scroll for Single Page Navigation
<nav class=”nav”>
<ul>
<li><a href=”#section1″>Section 1</a></li>
<li><a href=”#section2″>Section 2</a></li>
<li><a href=”#section3″>Section 3</a></li>
</ul>
</nav>
<div id=”section1″>Content for Section 1</div>
<div id=”section2″>Content for Section 2</div>
<div id=”section3″>Content for Section 3</div>
document.querySelectorAll(“.nav a”).forEach((link) => {
link.addEventListener(“click”, (e) => {
e.preventDefault();
document.querySelector(link.getAttribute(“href”)).scrollIntoView({
behavior: “smooth”,
});
});
});
Exercises
Exercise 1: Create a Vertical Dropdown Menu
- Create a vertical navigation menu with a dropdown for one of the items.
- Show the dropdown menu when hovered.
Exercise 2: Make the Hamburger Menu Sticky
- Modify the hamburger menu to remain at the top of the page when scrolling.
Exercise 3: Add a Search Bar
- Add a search bar to a horizontal navigation menu that filters menu items based on user input.
Multiple-Choice Questions
Question 1:
Which CSS property is used to hide dropdown content initially?
- visibility: hidden;
- display: none;
- opacity: 0;
- overflow: hidden;
Answer: 2. display: none;
Question 2:
What JavaScript method is used to toggle a class?
- classList.add()
- classList.toggle()
- classList.replace()
- classList.contains()
Answer: 2. classList.toggle()
Question 3:
Which media query is used to create a responsive menu?
- @media (min-width: 600px)
- @media (max-width: 768px)
- @media (orientation: landscape)
- @media (resolution: 2dppx)
Answer: 2. @media (max-width: 768px)
Best Practices
- Responsive Design: Use media queries for better cross-device compatibility.
- Accessibility: Use semantic HTML (<nav>, <ul>, <li>) and ARIA roles.
- Minimize JavaScript: Use CSS for animations whenever possible.
- Test Interactions: Ensure all menus are functional with both mouse and keyboard.
