Sommaire

Les menus déroulants

1. Les menus horizontaux

Les menus déroulants sont maintenant devenus des éléments très communs dans les interfaces des sites web. Foundation permet d’avoir des menus déroulants avec plusieurs niveaux hiérarchiques.

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 utiliser une liste <ul> avec les classes .dropdown et menu. Chaque item de premier niveau est placé dans un <li>. Chaque menu hiérarchique est à nouveau dans un élément <ul> avec la classe .menu. Les items du menu hiérarchique sont eux aussi placés dans des éléments <li>.

Voici le code HTML de cet exemple :

<ul class="dropdown menu" data-dropdown-menu> 
  <li><a href=’#’>Accueil</a></li> 
     <li> 
     <a>Projets</a> 
     <ul class="menu"> 
       <li><a href="#">Les projets à venir</a></li> 
       <li> 
         <a href=’#’>La photographie</a> 
         <ul class=’menu’> 
           <li><a href=’#’>Le ...