Créer un menu horizontal simple en HTML/CSS

Dans ce tutoriel, vous apprendrez comment créer un menu de navigation horizontal élégant et fonctionnel en utilisant HTML et CSS. Un menu de navigation bien conçu est essentiel pour aider les utilisateurs à naviguer facilement sur votre site web et à accéder rapidement aux différentes sections. Un menu horizontal est particulièrement adapté aux sites avec un nombre limité d'éléments de navigation, car il permet de maximiser l'espace disponible et de présenter les options de manière claire et organisée. Suivez les étapes ci-dessous pour créer votre propre menu horizontal en HTML et CSS.

Étape 1 : Créer une structure HTML de base

Tout d'abord, créez un fichier HTML avec une structure de base. Ajoutez une liste non ordonnée à l'intérieur d'une balise <nav> pour créer la structure du menu.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu horizontal avec HTML/CSS</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Accueil</a></li>
            <li><a href="#">À propos</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

Étape 2 : Appliquer des styles CSS

Ajoutez des styles CSS pour transformer la liste non ordonnée en un menu horizontal. Vous pouvez ajouter ces styles directement dans le fichier HTML à l'aide d'une balise <style> ou les placer dans un fichier CSS externe.


    /* Réinitialiser les styles par défaut des listes */
    ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    /* Appliquer des styles pour la balise <nav> */
    nav {
        background-color: #333;
        text-align: center;
    }

    /* Créer un menu horizontal */
    nav ul li {
        display: inline;
    }

    /* Appliquer des styles pour les liens */
    nav ul li a {
        display: inline-block;
        padding: 10px 20px;
        color: #fff;
        text-decoration: none;
    }

    /* Changer la couleur du lien lors du survol */
    nav ul li a:hover {
        background-color: #555;
    }

Dans cet exemple, nous avons réinitialisé les styles par défaut des listes avec margin, padding et list-style-type. Ensuite, nous avons appliqué un arrière-plan et un alignement du texte à la balise <nav>. Pour créer un menu horizontal, nous avons défini la propriété display des éléments de la liste <li> sur inline. Enfin, nous avons appliqué des styles aux liens et ajouté un effet de survol.

Après avoir appliqué ces styles CSS, vous aurez un menu horizontal fonctionnel sur votre page web.