Sommaire

Les menus hors affichage

1. Les objectifs

Les menus hors affichage vont vous permettre de gagner de la place lorsque vous en manquez : vous pourrez afficher un menu qui initialement ne sera pas visible à l’affichage de la page.

Ce menu va apparaître uniquement sur l’action des visiteurs en cliquant sur un bouton. Les visiteurs pourront masquer ce menu en cliquant sur le même bouton.

Attention, ce composant utilise du JavaScript, veillez à ce que les liaisons vers tous les fichiers soient bien implémentées. Reportez-vous au chapitre Installer Foundation, à la section Foundation complet - Les liaisons.

2. La mise en place

L’ensemble du système est placé dans une boîte <div> avec la classe .off-canvas-wrapper. Dans cette boîte conteneur, une deuxième boîte conteneur utilise la classe .off-canvas-wrapper-inner et l’attribut data-off-canvas-wrapper.

<div class="off-canvas-wrapper"> 
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper> 
     ... 
  </div> 
</div>

Dans la deuxième boîte inclue, nous devons placer deux autres boîtes <div>. La première contient le menu, la deuxième contient le bouton à cliquer et le contenu rédactionnel.

La première boîte contient donc le menu. Cette boîte utilise la classe .off-canvas position-left, l’attribut data-off-canvas et un identifiant unique id="mon-menu" ...