jMenu est un système de menu horizontal en jQuery et jQuery UI qui autorise un nombre illimité de sous-menus. jMenu possède plus d’une douzaine d’options : largeur des sous-menus, position (top et left) du premier niveau par rapport au niveau supérieur, délai d’ouverture et de fermeture des sous-menus, type d’effets applicables à l’ouverture ou à la fermeture des niveaux, etc.
Marquage HTML et classes CSS attendus pour jMenu :
<ul id="jMenu"> <li><a class="fNiv">Niveau 1</a> <!-- Don't forget the 'fNiv' class, only on the first level link !! --> <ul> <li class="arrow"></li> <!-- Only for illustration : arrow_down.png --> <li><a>Niveau 2</a></li> <li><a>Niveau 2</a></li> <li><a>Niveau 2</a> <ul> <li><a>Niveau 3</a></li> <li><a>Niveau 3</a></li> <li><a>Niveau 3</a></li> <li><a>Niveau 3</a></li> </ul> </li> <li><a>Niveau 2</a></li> </ul> </li> </ul>
Appel au script jMenu :
$(document).ready(function(){ $("#jMenu").jMenu(); });
- La démonstration interactive vous permettra de tester toutes les options en direct-live et de copier-coller le script qui en résulte.
- jQuery UI sert uniquement à ajouter des effets pendant l’ouverture et la fermeture des sous-menus.
- Via @BlouLapinou
Salut,
Très bon ce menu, et c’est typiquement le genre de script que j’aime avoir dans me bookmarks, toujours utile.
Par contre il me semble que le « e » de horizontal est de trop dans le titre ^^
Fabien Thomas — Merci 🙂 Pour le « e » je crois que « horizontal » est un adjectif qui s’accorde en genre et en nombre avec le sujet et en l’occurrence, « navigation » est féminin, d’où le « e » final 😉
@Bruno : en effet, je suis resté bloqué sur « menu horizontal » en fait, pas grave, on va dire que je te dois une bière pour m’être permis de t’apostropher pour rien ^^
Fabien Thomas — T’inquiète, ça m’a permis de réviser l’accord de l’adjectif ;)) Sinon, ok pour une bière un de ces jours, histoire de réviser l’accord de la pinte avec l’auxiliaire à boire o/
Même si la réalisation est plutôt sympathique et réussi, j’ai toujours beaucoup de mal avec les menus déroulants.
Ils sont inutilisables aux clavier et sur des plates-formes mobile. C’est le principe du pas de bras pas de chocolat.
J’espère que l’année 2011 fera table rase sur ces pratiques ergonomiques d’un autre temps.
Pas mal mais la classe fniv et le LI arrow sont vraiment en trop. Le JS aurait largement pu faire les même choses sans.
Salut tout le monde.
Je suis le créateur de ce plugin que vous pouvez retrouver sur mon nouveau site http://www.myjqueryplugins.com
Merci pour vos comm’, ça fait plaisir 🙂
Hello.
Plugin très simpa, seulement il y a quelque chose qui me semble pas très ergonomique au niveau du survol des menu parents :
Lorsque l’on survole, les menus enfants se déroulent, mais lorsque l’on glisse le curseur sur le menu parent en question a nouveau, ils se ré enroulent alors qu’ils devraient rester dépliés.
J’espère avoir été clair 😀