Sommaire

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 :

images/4-15-a.png

Et ceux-ci pour un écran plus petit :

Fermé

images/4-15-b.png

Ouvert

images/4-15-c.png

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>   ...