[Résolu] Menu Déroulant jQuery

Auteur
Toogy	# 21 Mar 2010 - 15:32:32
^_^ 23 Posts	Bonjour, ceci est mon premier message sur alsacréations et probablement pas le dernier. Je me suis aujourd'hui essayé à la création d'un menu déroulant en HTML/CSS/jQuery. Tout va pour le mieux à un gros détail près. Mon menu se déroule mais le visiteur ne peut pas cliquer sur les liens qui se sont affichés... C'est certes un gros problème. Je vous invite donc à vous rendre sur le lien suivant pour un petit aperçu de la situation : http://toogy.fr/MDJQ/ Je sais que ceci est illogique : $(".UseToShow").mouseout(function(){ $(this).next("div").slideUp(); }); Ce n'est donc pas la peine de me le préciser. C'était juste pour vous montrer comment doit réagir le menu lorsque le visiteur enlève sa souris des sous-menus. Merci d'avance pour votre aide Modifié par Toogy (10 Feb 2011 - 21:10)
^_^ 23 Posts
fvsch	# 21 Mar 2010 - 17:45:44
Administrateur 19942 Posts	Bonjour, Pour commencer, la structuration en DL (liste de définition) de ce menu est une horreur. Non seulement c'est une bêtise logique à la base, mais en plus l'exécution est mauvaise car ta liste de définitions n'est pas valide: l'élément DL ne peut avoir comme enfants que des éléments DT et DD, alors que là tu as quantité de DIV enfants de ton DL. Bref, le HTML de ce menu est à revoir complètement. Pour information, la structure classique pour un menu avec sous-menus est une structure en listes UL imbriquées, comme ceci: `<ul id="nav"> <li> <a href="/rubrique1/">Rubrique 1</a> <ul> <li>Rubrique 1, page 1</li> <li>Rubrique 1, page 2</li> </ul> </li> <li> <a href="/rubrique2/">Rubrique 2</a> <ul>...</ul> </li> ... </ul><!--#nav-->` Ensuite, tu as dans ton code actuel des DIV qui se suivent. Une première DIV représente un intitulé de rubrique, et la suivante le sous-menu de cette rubrique. Ton code jQuery réagit au survol de cette première DIV. Lorsqu'elle est survolée, la deuxième est montrée. Dès que le pointeur la quitte, la deuxième est cachée. Forcément, ça rend le menu complètement inutilisable. La solution consiste à avoir une structure avec éléments imbriqués (cf. l'exemple de HTML ci-dessus), et ne pas prendre en compte le survol de l'intitulé de la rubrique (un élément A ci-dessus) mais celui de l'élément qui englobe intitulé et sous-menu (un élément LI dans le code ci-dessus). Enfin, pour faire un bon menu déroulant avec JavaScript et notamment jQuery, je recommande fortement l'utilisation du plugin Superfish, qui prend en charge certains aspects qui tu as apparemment zappé, comme la possibilité d'utiliser le menu avec le clavier. C’est ça, la puissance intellectuelle. Bac + 2, les enfants.
Administrateur 19942 Posts
Toogy	# 21 Mar 2010 - 19:08:29
^_^ 23 Posts	Oui. Habituellement j'emploie la forme <ul><li></li></ul> mais je me suis inspiré d'un tutoriel. Ensuite. Merci pour Superfish. Et je savais que le menu était inutilisable...
^_^ 23 Posts