You are currently viewing Créer un menu responsive uniquement en HTML / CSS

Créer un menu responsive uniquement en HTML / CSS

Au cours des cinq dernières années, le trafic du web en provenance des mobiles n’a cessé d’augmenter. Il est donc plus que jamais indispensable d’avoir un site adapté à ces formats.

Dans cet article, je vais vous montrer une façon simple et rapide de créer un menu responsive déroulant (autrement dit « menu burger »), en utilisant uniquement les langages HTML et CSS.

La fondation du menu

Dans un premier temps, nous allons mettre en place une version statique du menu. Pour cet exemple, nous allons seulement utiliser trois pages, mais vous pourrez bien évidemment l’adapter en fonction de vos besoins.

Écrivons notre fichier index.html. Celui-ci sera très classique : il va être composé d’une balise nav avec nos trois pages.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu burger seulement en HTML et CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <div class="main_pages">
            <a href="#">Accueil</a>
            <a href="#">Actualité</a>
            <a href="#">Contact</a>
        </div>
    </nav>
</body>
</html>

J’aimerais retenir votre attention sur la ligne 11. Nous ajoutons en effet une div « main_pages », car ce sera ce bloc que nous ferons apparaître et disparaître au clic quand nous serons au format mobile.

Écrivons maintenant le CSS.

nav 
{
    margin: 100px auto;
    width: 50%;
    height: 100px;
    background: #48435C;
}

nav .main_pages 
{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

nav .main_pages a 
{
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    text-decoration: none;
    font-family: Arial, sans-serif;
    color: white;
}

nav a:hover 
{
    background: #5A5766
}

Voici le résultat visuel :

Maintenant, on va ajouter un peu de responsive. Lorsque la largeur de l’écran sera inférieure à 990px, alors notre menu sera moins haut et les titres des pages seront remplacés par l’icône du menu déroulant.

Dans notre index.html, il faut seulement ajouter l’icône du menu. Cette ligne doit être écrite juste au-dessus de la div « main_pages ».

<label>☰</label>

Dans notre CSS, il faut dans un premier temps masquer l’icône du menu au format ordinateur. Ensuite, on doit ajouter un media query qui, au format mobile, va afficher l’icône du menu (en le centrant) et masquer les pages principales.

label
{
    display: none;
}

@media all and (max-width: 991px)
{
    nav
    {
        height: 60px;
    }

    nav .main_pages 
    {
        display: none;
    }

    label 
    {
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-size: 40px;
        color: white;
        cursor: pointer;
    }
}

Voici le rendu visuel au format mobile :

Faire apparaître nos pages au clic sur l’icône

Nous allons maintenant devoir intégrer un input de type checkbox dans notre fichier HTML. C’est grâce à cet élément que nous pouvons nous passer de JavaScript. Le principe est simple : quand la checkbox est cochée, les pages apparaissent. Nous allons devoir, d’une part, faire le lien entre l’icône de notre menu et la checkbox, mais aussi masquer cette checkbox pour l’utilisateur (on n’a pas envie qu’il voit comment fonctionne notre menu, on veut seulement afficher l’icône burger).

Dans notre fichier HTML, il faut ajouter seulement une ligne : l’input de type checkbox. Il faut aussi mettre un « for » dans le label de l’icône du menu afin de faire le lien avec la checkbox.

    <nav>
        <label for="toggle">☰</label>
        <input type="checkbox" id="toggle">
        <div class="main_pages">
            <a href="#">Accueil</a>
            <a href="#">Actualité</a>
            <a href="#">Contact</a>
        </div>
    </nav>

Dans notre CSS il faut styliser et afficher la div « main_pages » (qui contient nos pages) au format mobile seulement quand la checkbox est cochée. Il ne faut également pas oublier de masquer la checkbox pour l’utilisateur. On a donc :

label, #toggle
{
    display: none;
}

@media all and (max-width: 991px)
{
    nav
    {
        height: 60px;
    }

    nav .main_pages 
    {
        display: none;
        flex-direction: column;
        background: #48435C;
        height: 220px;
    }

    nav .main_pages a {
        width: 50%;
    }

    label 
    {
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-size: 40px;
        color: white;
        cursor: pointer;
    }

    #toggle:checked + .main_pages {
        display: flex;
    }
}

Lorsque notre menu est déplié au format mobile, ça donne ça :

Adapter le menu pour votre propre site

C’est déjà fini ! Notre menu est prêt à être utilisé.

Comme dit précédemment, à vous d’adapter ce menu selon vos besoins. Pour ça, c’est très simple. En fonction du nombre de pages, vous pouvez modifier la largeur de la balise nav, la largeur des balises a et la hauteur de la class « main_pages » au format mobile.

Vous pouvez également changer les couleurs, les dimensions et même pourquoi pas ajouter des animations CSS au menu.

Merci pour votre attention. Découvrez d’autres astuces / réalisations sur la page Actualités de mon site.

Auteur de la première image : Seobility (Responsive web design), License: CC BY-SA 4.0