Tutoriel : Créer un menu de navigation responsive

Le menu responsive : la première chose que voit votre visiteur

Un menu de navigation qui s’adapte à tous les écrans est essentiel. Sur desktop, c’est une barre horizontale. Sur mobile, c’est un menu hamburger. Voici comment créer les deux en HTML, CSS et JavaScript pur.

HTML du menu

<header>
    <nav class="navbar">
        <a href="#" class="logo">ITSkills</a>
        
        <ul class="nav-links" id="navLinks">
            <li><a href="#" class="active">Accueil</a></li>
            <li><a href="#">Formations</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">À propos</a></li>
            <li><a href="#" class="btn-nav">Contact</a></li>
        </ul>
        
        <!-- Bouton hamburger (mobile) -->
        <button class="hamburger" id="hamburger" aria-label="Menu">
            <span></span>
            <span></span>
            <span></span>
        </button>
    </nav>
</header>

CSS complet

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    background: white;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

/* Logo */
.logo {
    font-size: 24px;
    font-weight: 700;
    color: #667eea;
    text-decoration: none;
}

/* Liens de navigation */
.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links a {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    position: relative;
    transition: color 0.3s;
}

.nav-links a:hover,
.nav-links a.active { color: #667eea; }

/* Soulignement animé */
.nav-links a::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #667eea;
    transition: width 0.3s;
}

.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

/* Bouton CTA dans le menu */
.btn-nav {
    background: #667eea !important;
    color: white !important;
    padding: 10px 24px;
    border-radius: 25px;
}

.btn-nav::after { display: none !important; }

/* Hamburger (caché sur desktop) */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.hamburger span {
    display: block;
    width: 28px;
    height: 3px;
    background: #333;
    margin: 5px 0;
    border-radius: 3px;
    transition: all 0.3s;
}

/* Animation hamburger → X */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 5px);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -5px);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .hamburger { display: block; }
    
    .nav-links {
        position: fixed;
        top: 60px;
        right: -100%;
        width: 280px;
        height: calc(100vh - 60px);
        background: white;
        flex-direction: column;
        padding: 40px 30px;
        gap: 20px;
        transition: right 0.3s ease;
        box-shadow: -5px 0 20px rgba(0,0,0,0.1);
    }
    
    .nav-links.open { right: 0; }
    
    .nav-links a { font-size: 18px; }
    
    .btn-nav {
        text-align: center;
        display: block;
        width: 100%;
    }
}

JavaScript

const hamburger = document.getElementById('hamburger');
const navLinks = document.getElementById('navLinks');

// Toggle menu
hamburger.addEventListener('click', () => {
    hamburger.classList.toggle('active');
    navLinks.classList.toggle('open');
});

// Fermer au clic sur un lien
document.querySelectorAll('.nav-links a').forEach(link => {
    link.addEventListener('click', () => {
        hamburger.classList.remove('active');
        navLinks.classList.remove('open');
    });
});

// Fermer si clic à l'extérieur
document.addEventListener('click', (e) => {
    if (!e.target.closest('.navbar')) {
        hamburger.classList.remove('active');
        navLinks.classList.remove('open');
    }
});

// Navbar transparente → opaque au scroll
window.addEventListener('scroll', () => {
    const navbar = document.querySelector('.navbar');
    navbar.style.background = window.scrollY > 50 
        ? 'rgba(255,255,255,0.98)' 
        : 'white';
});

Variante : Menu dropdown (sous-menu)

<li class="dropdown">
    <a href="#">Formations ▾</a>
    <ul class="dropdown-menu">
        <li><a href="#">Développement Web</a></li>
        <li><a href="#">Marketing Digital</a></li>
        <li><a href="#">Cybersécurité</a></li>
    </ul>
</li>

<style>
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 220px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s;
    list-style: none;
}
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dropdown-menu a {
    display: block;
    padding: 10px 20px;
}
.dropdown-menu a:hover { background: #f5f5f5; }
</style>

Exercice pratique