Le menu Burger

On appelle menu Burger un menu qui ne peut être affiché en raison d’une taille d’écran trop réduite. Pour ouvrir ce menu, l’utilisateur pourra cliquer sur le symbole Images/ic-burger.png

Dans l’idée, le menu sera affiché entièrement si l’écran est suffisamment large et sera représenté par ce symbole représentant plus ou moins un hamburger ( Images/ic-burger.png

), d’où son nom de menu Burger. Vous pourrez consulter le dossier 4_18_burger pour le voir fonctionner.

Nous aurons donc cet affichage sur un écran suffisamment large :

Et ceux-ci pour un écran plus petit :

Fermé

Ouvert

Voyons le code qui permet d’avoir automatiquement ce type de menu.

Côté HTML

<body>  
    <input type="checkbox" id="menuBurger">  
    <label for="menuBurger">☰</label>  
   
    <nav role="navigation" id="navMenu">  
        <ul>  
            <li><a href="#">Rubrique1</a></li>  
            <li><a href="#">Rubrique2</a></li>  
            <li><a href="#">Rubrique3</a></li>   ...