CSS menus

[téléchargement]

Menus verticaux: Simple, Rollover, ALA Taming, Buttons, Strengthening
Menus horizontaux: Rollover Navbar, Tabbed Navbar, Garbiak, Seth, DWWS
Menus imbriqués: Blue Boxes, Border and Indents, Classic Greys, Kaze
Menus déroulants (nécessitent ieHover.js pour IE): pop-open, chinon37, drop-down, galad, horizontal, isoLyon

Ces menus utilisent des listes imbriquées avec plusieurs feuilles de style alternatives :

aucun code JavaScript n'est utilisé ici, sauf pour la sélection de style (ci-dessus) et l'émulation de LI:hover pour IE ;
le code HTML demeure identique (voir ci-dessous), seule la feuille de style change.

<ul class="navlist">
  <li>
    <a href="#">Chapitre un</a>
  </li>
  <li>
    <a href="#">Chapitre deux</a>
  </li>
  <li>
    <a href="#">Chapitre trois</a>
  </li>
  <li>
    <a href="#">Chapitre quatre</a>
  </li>
</ul>

<ul class="navlist">
  <li>
    <a href="#">Chapitre un</a>
    <ul>
      <li><a href="#">un :: sub A</a></li>
      <li><a href="#">un :: sub B</a></li>
      <li><a href="#">un :: sub C</a></li>
      <li><a href="#">un :: sub D</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Chapitre deux</a>
    <ul>
      <li><a href="#">deux :: sub 1</a></li>
      <li><a href="#">deux :: sub 2</a></li>
      <li><a href="#">deux :: sub 3</a></li>
      <li><a href="#">deux :: sub 4</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Chapitre trois</a>
    <ul>
      <li><a href="#">trois :: sub alpha</a></li>
      <li><a href="#">trois :: sub beta</a></li>
      <li><a href="#">trois :: sub gamma</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Chapitre quatre</a>
    <ul>
      <li><a href="#">quatre :: sub I</a></li>
      <li><a href="#">quatre :: sub II</a></li>
      <li><a href="#">quatre :: sub III</a></li>
      <li><a href="#">quatre :: sub IV</a></li>
      <li><a href="#">quatre :: sub V</a></li>
      <li><a href="#">quatre :: sub VI</a></li>
    </ul>
  </li>
</ul>

L'idée provient de Listamatic2, le code HTML/CSS étant simplifié pour faciliter l'intégration.

Comme IE ne supporte pas le sélecteur LI:hover (sauf IE7 semble-t'il), les menus déroulants nécessitent une rustine JavaScript : ieHover.js. Pour que ce script ne soit chargé que sous IE, on utilise ce code (à placer dans le <head>) :

<!--[if lt IE 7]>
  <script type="text/javascript" src="ieHover.js"></script>
<![endif]-->

Attention : cela reste dépendant des préférences d'IE, et peut ne pas fonctionner dans certains cas.

Dernière mise à jour : 25/04/2006 18:24:08