1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Menu & Co
  5. Menu déroulant accessible dom/css

Menu déroulant accessible dom/css

Soyez le premier à donner votre avis sur cette source.

Vue 35 696 fois - Téléchargée 8 444 fois

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

Ajouter un commentaire Commentaires
Signaler
Messages postés
2
Date d'inscription
samedi 12 avril 2003
Statut
Membre
Dernière intervention
29 mars 2008
Bonjour,

excellent script mais je rencontre un soucis assez bizarre, je m'explique :

Si j'ai un div juste en dessous du menu et que celui-ci a comme attribut CSS "Overflow:hidden", le sous-menu passe en dessous de ce Div.
Pourtant le z-index est à "1" et mon div est par défaut en "0".

Si quelqu'un avait la solution ça me ferait gagner bien du temps.

Merci par avance.
Signaler
Messages postés
3
Date d'inscription
mercredi 28 juillet 2004
Statut
Membre
Dernière intervention
5 novembre 2007
j'ai un soucis, pour que les boxe des sous menu tombe en bas de barre principale horizontal
j'ai éssayer avec un margin-top mais le rollover fait sauter le menu

merci d'avance
Signaler
Messages postés
173
Date d'inscription
vendredi 13 janvier 2006
Statut
Membre
Dernière intervention
10 mai 2010
Problème avec ce menu : lorsqu'on a une appli flash sur la page, le menu n'est pas au premier plan.. Il est derrière l'appli flash.
Y a t il une methode pour que le menu soit devant ?

bye
Signaler
Messages postés
24
Date d'inscription
mercredi 7 juillet 2004
Statut
Membre
Dernière intervention
14 juin 2006
Tout simplement ingénieux,
j'adore la possibilité de naviguer avec la touche tab, le tout bien structuré
Bravo
Signaler
Messages postés
1
Date d'inscription
jeudi 23 juin 2005
Statut
Membre
Dernière intervention
23 juin 2005
Bonjour,
Malgrès mon grand age (je fais de l'informatique depuis 1966 ... et du web depuis 1995), j'ai trouvé avec cet essemble de script et css ce que je cherchais.
Bien sûr, il faut mettre ses pattes dans le camboui pour changer les ombres, les fonds, les couleurs de texte (normal et hover). Et puis aussi rajouter ses propres onmouseover, onmouseout avec ecriture en textarea et affichage d'image (qui ne marche qu'en IE d'ailleurs ...).
Merci, cela m'a permis de présenter de façon concise le contenu hétéroclite de mon site web qui est ... très rempli.
Afficher les 19 commentaires
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.