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