Récemment j'étais en train de faire quelques petites modifications sur mon site , quand j'ai redécouvert le menu hamburger que j'avais fait pour celui-ci. Ce n'est pas très spécial, juste un menu qui, une fois que vous entrez dans une petite résolution, se comprime dans un menu vertical caché que vous pouvez afficher ou masquer en appuyant sur un bouton. La partie intéressante de celui-ci est qu'il est fait uniquement en utilisant HTML et CSS.

Je me souviens quand je le faisais que je ne pouvais pas trouver un exemple complet sur Internet sur la façon d'accomplir cela, et que cela impliquait beaucoup d'essais et d'erreurs pour obtenir le résultat souhaité. J'ai donc extrait le code du menu et l'ai transformé en un exemple simplifié.

Les pré-requis

Quand j'ai commencé ce projet, j'avais quelques prérequis qu'il devait remplir :

• Il ne pouvait utiliser que HTML et CSS, y compris les interactions (évidemment) .
• Il doit s'agir du même menu, ne pas avoir deux menus différents et n'en afficher qu'un seul.
• Si le CSS ne se charge pas, il doit être au moins fonctionnel.

Le projet comporte les étapes suivantes :

1. Faites une liste de liens.
2. Faites en sorte que la liste des liens soit belle sur les grands écrans.
3. Faites en sorte que la liste des liens soit belle sur les petits écrans.
4. Rendre la liste des liens sur petit écran pliable.

Un menu est, à la fin, une liste de liens utilisés pour la navigation, donc on commence par ça :

<nav>
    <!-- Always visible items in the nav bar -->
    <ul>
        <li>
            <a href="https://threkk.com">threkk.com</a>
        </li>
    </ul>
    <!-- The collapsable menu -->
    <ul>
        <li><a href='https://mastodon.social/@threkk'>Mastodon</a></li>
        <li><a href='https://twitter.com/threkk'>Twitter</a></li>
        <li><a href='https://github.com/threkk'>Github</a></li>
    </ul>
</nav>

Faire en sorte que la liste soit belle sur grand écran

Cette partie est simple, avec un peu de CSS, nous sommes prêts. C'est à vous de décider ce qui vous va bien :

nav {
    background-color: SeaGreen;
    color: snow;
    display: flex;
    justify-content: space-between;
}
nav ul {
    /* Make the markers disappear */
    list-style-type: none;
}
nav ul li {
    /* Puts the elements in a single line */
    display: inline-flex;
    margin: 0.3em 1em;
}

Rendre la liste agréable sur les petits écrans

À l'aide des requêtes multimédias, nous limitons les règles suivantes aux seules petites résolutions. Vous pouvez jouer avec la valeur utilisée selon si, par exemple, vous souhaitez considérer les tablettes comme des "petits appareils".

@media (max-width: 576px) {
    nav {
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
    }
    /* Because we are in mobile mode, we want to display it as a
       vertical list */
    nav ul {
        display: block;
    }
    /* We have two lists: the first one are the always visibile items
       in the menu bar. The second one is the one that will be hidden */
    nav ul:last-child {
        width: 100%;
        flex-basis: 100%;
    }
    nav ul li {
        margin-bottom: 0;
        width: 100%;
        text-align: right;
        padding: 0.5em;
    }
}

      
                

                    
                    
                
            

Enfin, la partie intéressante. Toute la magie est là : étant donné une case à cocher, si elle n'est pas cochée, la liste adjacente ne s'affiche pas.

input[type='checkbox']:not(:checked)+ul {
    display: none;
}

<nav>
    <!-- Always visible items in the nav bar -->
    <ul>
        <li>
            <a href="https://threkk.com">threkk.com</a>
        </li>
    </ul>
    <!-- The hamburger menu -->
    <label for='menu' tabindex="0">
        
    </label>
    <input id='menu' type='checkbox' />
    <!-- The collapsable menu -->
    <ul>
        <li><a href='https://mastodon.social/@threkk'>Mastodon</a></li>
        <li><a href='https://twitter.com/threkk'>Twitter</a></li>
        <li><a href='https://github.com/threkk'>Github</a></li>
    </ul>
</nav>

nav input[type='checkbox'], nav label {
    display: none;
}

/* Stlying the menu icon, the checkbox stays hidden */
nav label {
    text-align: right;
    display: block;
    padding: 0.5em;
    line-height: 1.6em;
    align-self: center;
}

      
                

                    
                    
                
            

As-tu aimé cette publication? Faites le moi savoir sur Mastodon ou Twitter !