JavaScript & CSS : produire un menu 'hamburger'

Présentation et utilité

Ces trois barres horizontales sont omniprésentes : jeux vidéo, applications, sites internet, logiciel, etc.
Lorsque vous les voyez, vous savez immédiatement qu’il s’agit d’un bouton vous donnant accès à un menu.
Sur un petit écran les pixels sont précieux. le menu "hamburger" est une bonne solution.

Donc par défaut un menu 'hamburger' est masqué.
Si clic sur l'icône 'hamburger' alors le menu s'affiche.
Nouveau clic sur l'image 'hamburger' et alors le menu disparait.

Exemple

Le code HTML

... <body> <img src ="../images/hamburger_icone.png" class ="hamburger" onclick ="mafonction()" > <!--zone de navigation --> <nav> <a href="#">lien 1</a> <a href="#">lien 2</a> <a href="#">lien 3</a> </nav> ...

J'ai récupéré l'image 'hamburger_icone.png' sur la 'toile'.
Il suffit de taper 'hamburger' dans le moteur de recherche puis de cliquer sur l'onglet 'images'.
J'ai redimensionné l'image avec PAINT car elle était trop lourde.

Notez dans la balise IMG l'attribut "onclick" qui permet d'appeler une fonction JS.
L'icône est stylé via la classe 'hamburger' : voir feuille de style ci-dessous.

Le script

Il consiste en une fonction nommée "mafonction".

function mafonction() 
{
  var menu = document.querySelector('nav');
  if (menu.style.display == "block") { menu.style.display = "none";  } 
  else {menu.style.display = "block";  }
}

Si la boite NAV est affichée alors la fonction la masque.
Si la boite NAV est masquée alors la fonction l'affiche.

Le code CSS

/* Styler le menu de navigation */
nav {background : navy ;  position: relative; z-index :1;}

/* Masquer le menu de navigation */
nav {display: none;}

/* Styler les liens du menu */
nav a {display: block; color: skyblue;  height : 50px ; line-height : 50px ; padding-left : 40px;  
	text-decoration: none;  font-size: 15px; }

/* Styler l'icone hamburger */
img.hamburger {position : absolute ; right: 0px ; top : 0px; width : 40px; z-index : 9; }

/* Styler le lien survolé */
nav a:hover { background-color: skyblue ;  color: navy; }

La boite NAV a un z-index inférieur à celui affecté à l'icône afin que ce dernier soit toujours en premier plan.
Par défaut la boite NAV est masquée.
Les liens contenus dans NAV sont de type block, couleur de la légende : skyblue, pas de soulignement, etc.
L'cône est positionné en haut à droite de l'écran.
Sur survol d'un lien les couleurs de fonds et de texte sont inversées.

Test du code

Observez le rendu

Cliquez sur le "hamburger" pour afficher le menu.
Cliquez de nouveau sur cet icône pour le masquer.

Retour menu