Créer une barre de navigation avec HTML et CSS : Simple et élégante

Une barre de navigation est un élément essentiel pour tout site web. Que vous débutiez ou que vous souhaitiez perfectionner vos compétences, cet article vous guidera à créer une barre de navigation simple, élégante et responsive.

Construction de la barre de navigation avec HTML

Commencez par structurer la barre de navigation avec un code HTML simple. Voici un exemple :

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Barre de navigation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="logo">MonSite</div>
        <ul class="nav-links">
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div class="hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</body>
</html>

Explication du code :

La barre de navigation est contenue dans une balise <nav>.
Le logo est une simple div.
Les liens de navigation sont regroupés dans une liste non ordonnée (<ul>).
Une icône hamburger est ajoutée pour le menu responsive.

Stylisation avec CSS

Créez un fichier styles.css et ajoutez les styles suivants pour rendre la barre de navigation attrayante.

CSS

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 0.5em 1em;
    color: white;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1em;
    margin: 0;
}

.nav-links a {
    text-decoration: none;
    color: white;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #00bcd4;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: white;
}

Explication du CSS :

La barre de navigation est configurée avec display: flex pour une disposition horizontale.
Les liens ont un effet hover qui change leur couleur.
L'icône hamburger est stylisée mais reste cachée sur les grands écrans.

Ajout d’un menu responsive

Pour rendre la barre de navigation adaptable aux petits écrans, ajoutez ces styles dans le fichier CSS :

CSS

@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        background-color: #333;
        position: absolute;
        top: 50px;
        right: 0;
        width: 100%;
    }

    .nav-links.active {
        display: flex;
    }

    .hamburger {
        display: flex;
    }
}

Ajoutez ensuite un peu de JavaScript pour activer le menu hamburger :

JSX

<script>
    const hamburger = document.querySelector('.hamburger');
    const navLinks = document.querySelector('.nav-links');

    hamburger.addEventListener('click', () => {
        navLinks.classList.toggle('active');
    });
</script>

Explication :

Les styles responsive cachent les liens de navigation par défaut sur les petits écrans.
Le JavaScript ajoute ou retire une classe .active pour afficher le menu lorsque l'icône hamburger est cliquée.

Conclusion

Avec ces étapes simples, vous avez créé une barre de navigation à la fois élégante et fonctionnelle. Elle est adaptable à tous les appareils et offre une expérience utilisateur fluide. Lancez-vous et personnalisez-la selon vos besoins !