Sommaire

Les menus "responsives"

1. Les menus horizontaux à verticaux

Actuellement la conception des sites web passe par le Responsive Web Design. Il faut que les sites web puissent s’adapter aux différentes tailles d’écran de diffusion : smartphone, tablette et écran d’ordinateur.

Foundation vous propose deux classes qui vont permettre aux menus de s’adapter aux différentes tailles d’écran :

  • .medium-horizontal : adaptation pour les écrans de taille moyenne ayant une largeur supérieure à 40 em.

  • .large-horizontal : adaptation pour les écrans de grande taille ayant une largeur supérieure à 64 em.

Voici le code utilisé dans cet exemple :

<ul class="vertical medium-horizontal menu"> 
  <li><a href="#">Accueil</a></li> 
  <li><a href="#">Projets</a></li> 
  <li><a href="#">Equipe</a></li> 
  <li><a href="#">Voyages</a></li> 
</ul>

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

Voici son affichage sur un écran large :

images/C09-023.png

Voici son affichage sur un écran de taille plus réduite : tous les items se placent les uns sous les autres.

images/C09-024.png

2. Les menus déroulants

Foundation vous propose une deuxième solution pour avoir des menus "responsives". Avec un affichage sur un grand écran, ...