Sommaire

Les menus Drilldown

Foundation propose un type de menu bien particulier, nommé Drilldown. Ce type de menu est pratique à utiliser lorsque vous disposez de peu de place dans votre interface car les items hiérarchiques vont s’afficher dans le même emplacement que le premier niveau du menu.

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.

Nous allons retrouver une structure similaire à celle que nous venons de voir avec les menus hiérarchiques verticaux.

Pour l’élément <ul> de premier niveau, il faut ajouter l’attribut data-drilldown. Ensuite, pour chaque menu hiérarchique enfant <ul>, il faut ajouter les classes vertical et menu.

Voici le code HTML à utiliser :

<ul class="vertical menu" data-drilldown style="width: 200px;"> 
<li><a href=’#’>Accueil</a></li> 
   <li> 
     <a>Projets</a> 
     <ul class="vertical menu"> 
       <li><a href="#">Les projets à venir</a></li> 
       <li> 
         <a href=’#’>La photographie</a> 
         <ul class=’vertical menu’> 
   ...