[Résolu] Menu Déroulant jQuery

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)

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.

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...