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 :-)
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.
j'ai éssayer avec un margin-top mais le rollover fait sauter le menu
merci d'avance
Y a t il une methode pour que le menu soit devant ?
bye
j'adore la possibilité de naviguer avec la touche tab, le tout bien structuré
Bravo
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.
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.