Responsive Design – Les menus en mode hamburger

LEÇON

 

responsive_affichage_exemple4Qu'est-ce que le mode "hamburger" ?

C'est un anglicisme pour décrire la réduction d'un menu en petit symbole de trois lignes horizontales. Ce symbole évoque pour certains un hamburger.

C'est utilisé beaucoup dans le cas d'un écran étroit, type smartphone, car mettre le menu en haut de la page ne laisserai peu de place pour le début du contenu (très important pour accrocher le visiteur).

Quand on clique/touche le hamburger le menu se dévoile.

 

Comment implémenter un mode "hamburger" ?

Dans le HTML on crée 2 sections (div) avec identifiants "hamburger" et "menu" par exemple. La section hamburger contient l'image du hamburger uniquement. La section menu contient les liens du menu dévoilé.

L'idée et de coder la page pour que, au départ, dans le cas des petits écrans, la section "hamburger" soit visible et la section "menu" soit invisible.

Ensuite on met en place du code JavaScript pour basculer l'affichage entre hamburger et menu. C'est à dire que, quand le hamburger est cliqué/touché, le code JavaScript fait en sorte que la section "hamburger" devient invisible et que la section "menu" devient visible.

Exemple :

 

Dans la section head du HTML


<link rel="stylesheet" type="text/css"
      href="MON_NOM_DE_FICHIER_STYLES.css">
<script type="text/javascript" language="JavaScript"
      src="MON_NOM_DE_FICHIER_JAVASCRIPT.js"></script>

 

Qqpart dans le body du HTML


<div id="hamburger">
  <a href="javascript:hamburger_click();">
    <img id="hamburger-img" src="hamburger.png">
  </a>
</div>

<div id="menu">
    <ul>
	<li>Donec</li>
	<li>Vitae</li>
	<li>Rhoncus</li>
	<li>Lacinia</li>
	<li>Lectus</li>
	<li>Sapiens</li>
    </ul>
</div>

 

Dans le CSS


#menu
{
  font-size:18px;
  font-weight:normal;
  letter-spacing:6px;
}

#menu ul
{
  margin:0;
  padding:0;
  list-style:none;
}

#menu ul li
{
  cursor:pointer;
  padding:5px 8px;
}

#menu ul li:hover
{
  background-color:#008ac5;
  color:gold;
}

#hamburger
{
  display:none;
  width:100%;
  height:50px;
  text-align:center;
}

@media screen and (max-width: 750px)
{

#menu
{
  display:none;
}

#hamburger
{
  display:block;
}

}

 

Code JavaScript


function hamburger_click()
{
  var hamburgerElement = document.getElementById("hamburger");
  var menuElement = document.getElementById("menu");

  hamburgerElement.style.display = "none";
  menuElement.style.display = "block";
}

 

EXERCICES

1. Prendre comme base de travail le code de la leçon Responsive Design - Les @media queries et l'adapter pour intégrer un menu avec mode hamburger quand l'écran est étroit. Voici le lien pour l'image hamburger.png.