Créer un menu horizontal avec menu burger mobile CSS

Dans ce tutoriel, nous allons créer un menu horizontal avec un menu burger pour mobile en utilisant HTML et CSS. Le menu burger apparaîtra uniquement sur les écrans de petite taille et sera remplacé par un menu horizontal standard sur les écrans plus grands.

Voir le résultat final sur Codepen

Créez le fichier HTML:

Créez un nouveau fichier HTML et ajoutez le code suivant pour définir la structure de base de votre menu:

<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Menu horizontal avec menu burger</title>
</head>
<body>
    <nav>
        <div class="logo">
            <h4>Logo</h4>
        </div>
        <input type="checkbox" id="menu-toggle">
        <label for="menu-toggle" class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </label>
        <ul class="nav-links">
            <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>

Ici, nous avons ajouté un élément input de type "checkbox" avec l'ID "menu-toggle" et un élément label associé pour gérer l'ouverture et la fermeture du menu burger.

Créez le fichier CSS:

Créez un nouveau fichier CSS (par exemple, styles.css) et ajoutez le code suivant pour définir le style de base de votre menu :

/* Réinitialiser les marges, les espacements et définir box-sizing sur tous les éléments */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Configuration de la barre de navigation */
nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #333;
    font-family: 'Poppins', sans-serif;
}

/* Configuration du logo */
.logo {
    color: white;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}

/* Cacher l'input de type checkbox */
input[type=checkbox] {
    display: none;
}

/* Configuration des liens de la barre de navigation */
.nav-links {
    display: flex;
    justify-content: space-around;
    width: 50%;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    color: white;
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
}

/* Configuration de l'icône burger */
.burger div {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px;
    border-radius: 3px;
}

/* Cacher l'icône burger sur les écrans d'ordinateur */
.burger {
    display: none;
}

/* Styles spécifiques pour les écrans mobiles (max-width: 768px) */
@media screen and (max-width: 768px) {
    /* Cacher les liens de la barre de navigation sur les écrans mobiles */
    .nav-links {
        display: none;
    }

    /* Afficher l'icône burger sur les écrans mobiles */
    .burger {
        display: block;
        cursor: pointer;
    }

    /* Afficher les liens de la barre de navigation lorsque la case est cochée sur les écrans mobiles */
    input[type=checkbox]:checked ~ .nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 8vh;
        right: 0;
        background-color: #333;
        width: 50%;
        height: 92vh;
    }
}

Dans ce code CSS, nous utilisons la pseudo-classe :checked pour afficher le menu lorsque la case est cochée et le cacher lorsqu'elle est décochée.

Voici une explication des modifications apportées au code CSS :

Nous avons ajouté la règle display: none; pour l'élément input de type "checkbox" afin de le cacher de l'affichage.
Nous avons ajouté la règle display: none; pour les .nav-links dans la requête média pour les écrans de moins de 768 pixels de large, afin de masquer le menu par défaut sur les appareils mobiles.
Nous avons utilisé la pseudo-classe :checked pour modifier l'affichage des .nav-links lorsque la case est cochée. Lorsque la case est cochée, le menu est affiché avec un display: flex;, une direction de colonne et une position absolue.

Maintenant, lorsque vous cliquez sur le menu burger sur les appareils mobiles, le menu s'ouvrira et se fermera sans avoir besoin de JavaScript. Les liens du menu s'afficheront en colonne, et le menu burger sera visible uniquement sur les écrans de moins de 768 pixels de large. Sur les écrans plus larges, le menu horizontal standard s'affichera.

Créer un menu horizontal avec menu burger mobile CSS

Créez le fichier HTML:

Créez le fichier CSS: