Sommaire

Les menus

1. Le menu simple

Pour créer un menu simple avec Fondation, vous devez utiliser une liste non ordonnée <ul>, avec la classe .menu. Chaque élément de menu est placé dans un élément <li>.

Voici un exemple simple :

<ul class="menu"> 
  <li><a href="#">Accueil</a></li> 
  <li><a href="#">Projets</a></li> 
  <li><a href="#">Equipe</a></li> 
  <li><a href="#">Contact</a></li> 
</ul>

Le fichier de cet exemple à télécharger est Chapitre 09 / 09-menus-b1.html.

Voici son rendu :

images/C09-001.png

Il y a deux règles CSS principales qui interviennent pour la mise en forme des menus : un affichage des listes sans symbole, un affichage en mode tableau, avec un alignement vertical du texte.

.menu { 
  margin: 0; 
  list-style-type: none; 
} 
.menu > li { 
  display: table-cell; 
  vertical-align: middle; 
}

2. Le menu à droite

L’utilisation de la classe .align-right permet de placer le menu à droite de son conteneur :

<ul class="menu align-right"> 
  ... 
</ul>

Voici son affichage :

images/C09-002.png

La règle CSS qui permet le flottement à droite de chaque item <li> :

.menu.align-right > li { 
  float: right; 
}

3. Le menu étendu

L’utilisation de la classe .expanded permet ...