Navigation Menus with CSS and JavaScript: Comprehensive Guide
Navigation Menus with CSS and JavaScript: Comprehensive Guide 1
Types of Navigation Menus 2
Step-by-Step: Building Navigation Menus 2
1. Basic Horizontal Menu 2
2. Vertical Navigation Menu 3
3. Dropdown Menu 4
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
1
4. Hamburger Menu (Responsive) 6
Detailed Examples 7
Example 1: Highlight Active Menu Item 7
Example 2: Smooth Scroll for Single Page Navigation 8
Exercises 8
Exercise 1: Create a Vertical Dropdown Menu 8
Exercise 2: Make the Hamburger Menu Sticky 8
Exercise 3: Add a Search Bar 8
Multiple-Choice Questions 8
Question 1: 9
Question 2: 9
Question 3: 9
Best Practices 9
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
1. Horizontal Navigation: Menus aligned horizontally at the top or bottom of the page.
2. Vertical Navigation: Menus aligned vertically, often on the side of the page.
3. Dropdown Menus: Menus with sub-items that expand when hovered or clicked.
4. 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>
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
2
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 {
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
3
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>
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
4
</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;
}
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
5
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;
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
6
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:
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
7
.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
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
8
Question 1:
Which CSS property is used to hide dropdown content initially?
1. visibility: hidden;
2. display: none;
3. opacity: 0;
4. overflow: hidden;
Answer: 2. display: none;
Question 2:
What JavaScript method is used to toggle a class?
1. classList.add()
2. classList.toggle()
3. classList.replace()
4. classList.contains()
Answer: 2. classList.toggle()
Question 3:
Which media query is used to create a responsive menu?
1. @media (min-width: 600px)
2. @media (max-width: 768px)
3. @media (orientation: landscape)
4. @media (resolution: 2dppx)
Answer: 2. @media (max-width: 768px)
Best Practices
1. Responsive Design: Use media queries for better cross-device compatibility.
2. Accessibility: Use semantic HTML (<nav>, <ul>, <li>) and ARIA roles.
3. Minimize JavaScript: Use CSS for animations whenever possible.
4. Test Interactions: Ensure all menus are functional with both mouse and keyboard.
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
