Modèles de menus




Menu horizontal déroulant graphique à images coulissantes


Partant du menu horizontal déroulant précédent, lui-même issu du menu accordéon, nous aurons facilement le menu graphique déroulant.

En interne dans le HTML

Placer le menu dans la div EnTete
Nous attribuons à chaque élément li de premier niveau sa class correspondante (<li class="Accueil">)

Sur la feuille de style incorporée

#mAc  Nous supprimons la bordure pointillée. Nous modifions les dimensions du menu  ul id="mAc"  550x30; marge gauche 200px pour le centrer, padding-bottom:0px

#mAc li a  Nous donnons les dimensions des images coulissantes  100x30. Nous adaptons les couleurs de texte pour l'état repos et l'état survolé.                       

#mAc li.Accueil a  
#mAc li.Accueil a:hover   Nous créons 2 styles à sélecteur complexe pour chaque li afin d'aller chercher son image coulissante d'arrière plan et la positionner à l'état repos et à l'état survolé.