Navigation Project - CSS Practice

Navigation Menu Project

Build a responsive navigation menu with dropdowns and a mobile hamburger menu using modern CSS.

Project Overview

This project will guide you through creating a modern, responsive navigation menu using HTML and CSS. You'll learn to structure navigation, style menus, and add interactivity for both desktop and mobile users.

Responsive navigation bar
Dropdown menus for desktop
Hamburger menu for mobile
Modern design and accessibility

Estimated Time

Beginner: 2-3 hours | Intermediate: 1-2 hours

Difficulty Level: Beginner to Intermediate

Step-by-Step Implementation

1 Create the HTML Structure

HTML Boilerplate

<nav class="main-nav">
    <div class="nav-logo">Brand</div>
    <ul class="nav-menu">
        <li><a href="#">Home</a></li>
        <li class="dropdown">
            <a href="#">Services ↓</a>
            <ul class="dropdown-menu">
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Development</a></li>
                <li><a href="#">SEO</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
    </div>
</nav>

2 Add CSS for Layout & Design

Basic CSS Example

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(90deg, #667eea, #764ba2);
    color: white;
    padding: 1rem 2rem;
    position: relative;
}
.nav-logo {
    font-size: 1.5rem;
    font-weight: bold;
}
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
}
.nav-menu a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}
.nav-menu a:hover {
    color: #f093fb;
}
.dropdown {
    position: relative;
}
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    color: #333;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-radius: 8px;
    z-index: 10;
}
.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu li a {
    color: #333;
    padding: 0.75rem 1.5rem;
    display: block;
    border-bottom: 1px solid #eee;
}
.dropdown-menu li:last-child a {
    border-bottom: none;
}
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}
.hamburger span {
    width: 25px;
    height: 3px;
    background: white;
    border-radius: 2px;
    transition: all 0.3s;
}
@media (max-width: 900px) {
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: linear-gradient(90deg, #667eea, #764ba2);
        flex-direction: column;
        gap: 0;
        z-index: 100;
    }
    .nav-menu.open {
        display: flex;
    }
    .hamburger {
        display: flex;
    }
}

3 Add Interactivity (JS)

Hamburger Menu Toggle (JS)

const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
hamburger.addEventListener('click', () => {
    navMenu.classList.toggle('open');
});

4 Test Responsiveness & Accessibility

                    Checklist
                    Test on mobile, tablet, and desktop
Check keyboard navigation and focus states
Use semantic HTML for navigation
Ensure color contrast is accessible
Validate your HTML and CSS

                