Menu déroulant accessible dom/css

Télécharger le projet
Commenter

Description

Ce menu déroulant est basé sur une structure de liste qui permet de le rendre accessible aux navigateurs texte, anciens navigateurs, etc.

Comme il est loin d'être le seul (voir le très bon "Iubito's menu"), voici ce qui le distingue :
- le script n'est pas paramétrable; l'ensemble de l'apparence du menu se définit dans une feuille de style CSS
- il accepte une profondeur illimitée de sous-menus
- il s'adapte au changement dynamique de feuille de style dans les navigateurs qui le supportent (Mozilla et Opera) ainsi qu'au changement de la taille des caractères
- il détecte automatiquement si le menu est horizontal ou vertical
- et tout ça dans un script plutôt léger (moins de 7k)

Testé avec succès dans IE5.0, 6.0, Safari, Mozilla et Opera 7.

Démo (en français maintenant): http://home.tele2.fr/ikari/menu/menu-deroulant-fr.html

Mise à jour: 14 mars 2004 (version 0.1b):
Correction de bugs qui survenaient dans Opera 7 et Win IE 5 & 6

Source / Exemple : 


<html>
<head>
...
<script type="text/javascript" src="./scripts/menuDropdown.js"></script>
<link rel="StyleSheet" type="text/css" href="./style/menuH.css" title="Horizontal" />
<link rel="Alternate StyleSheet" type="text/css" href="./style/menuV.css" title="Vertical" />
</head>
<body>
<div id="mainMenu1">
  <ul id="menuList1">
    <li><a href="#">Single element</a></li>
    <li>
      <a class="actuator" href="#">Submenu</a>
      <ul class="menu">
        <li><a href="#">Single element</a></li>
        <li>
          <a class="actuator" href="#">Nested submenu</a>
          <ul class="menu">
            ...
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
...
</body>
</html>

Conclusion :


Le script est encore en test pour l'instant, même s'il devrait bien marcher.

Tous les commentaires sont les bienvenus :-)
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.