Modèles de menus


Menu accordéon

  1. Dans une div id="mAc", nous construisons la liste imbriquée. Nous donnons à cette div une largeur de 120 px, une hauteur que nous ajusterons pour laisser dérouler l'accordéon soit 330 px ainsi que des marges pour la positionner dans la page.
  2. Pour le premier niveau mAc ul nous supprimons les décalages par défaut
  3. Pour les éléments de premier niveau mAc li, nous supprimons les puces et donnons une bordure haute solid 5px (ici blanche pour y voir mieux,mais nous pouvons la rendre transparente pour une meilleure présentation)
  4. Nous faisons les liens et donnons à mAc li a  les propriétés display:bloc, largeur 120, hauteur 30, hauteur de ligne 30, couleur de texte au repos et plus clair à l'état survolé.
  5. Deuxième niveau : au repos les sous-menus mAc li ul ne seront pas affichés par display:none
  6. Au survol mAc li:hover ul  ils seront affichés  par display:block
  7. Nous créons pour chaque rubrique, une class changeant la couleur d'arrière plan. Cette class est appliquée à chaque li de premier niveau 
    • au repos  mAc ul li.Accueil a et 
    • au survol  mAc ul li.Accueil a:hover