Sommaire

La barre des menus

Foundation propose d’utiliser une barre de navigation qui peut comporter deux parties : une à gauche et une à droite. Cette barre des menus va utiliser la classe .top-bar.

La boîte <div> générale utilise la classe .top-bar. La première partie gauche de la barre de navigation est placée dans une autre boîte <div> qui utilise la classe .top-bar-left, et celle de droite utilise la classe .top-bar-right. À l’intérieur de ces deux boîtes <div>, nous retrouvons des listes <ul>, avec la classe .menu.

Cette barre des menus s’affiche sur toutes la largeur de son conteneur.

Voici le code HTML :

<div class="top-bar"> 
  <div class="top-bar-left"> 
     <ul class="menu"> 
        <li class="menu-text">Navigation</li> 
        <li><a href="#">Accueil</a></li> 
        <li><a href="#">Equipe</a></li> 
        <li><a href="#">Projets</a></li> 
     </ul> 
  </div> 
  <div class="top-bar-right"> 
     <ul class="menu"> 
        <li><input type="search" placeholder="Recherche"></li> 
        <li><button ...