Jquery menu déroulant déroule tout le temp

Bonjour,

J'utilise jquery et je désire réaliser un menu déroulant horizontal.
J'arrive a le faire avec click sur l'élément, mon menu se déroule bien.

Cependant quand j'essaye avec le passage de la souris cela deviens chaotique. C'est a dire que au premier survol ou passage, mon menu se déroule bien.

Mais car il y a toujours un MAIS. Si je veux aller sur les éléments déroulé il se rembobine puis se déroule puis se ré enroule, bref c'est infernal. Impossible d'avoir un joli menu qui tiens en place pour permette la sélection tant que le curseur est dessus.

J'ai tester plusieurs évènement concernant la souris et l'éléments, le passage, la sortis etc.. Sur différent endroit de mon menu. Les résultât sont bien évidement différent, mais soit il se déroule trop soit il reste ouvert.

Une logique évidente m'échappe assurément. J'ai bien évidement regardé d'autre exemple sur le net, Mais cela ne m'intéresse pas de faire un copie/colle du travail des autres je désire comprendre le pourquoi.

Bien assez attendu, voila mon code:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<script> function masquer(TheId) { // $("#sous_"+TheId).slideToggle("slow"); $("#sous_tarifs_prestations").slideToggle("slow"); }   function afficher(TheId) { // $("#sous_"+TheId).slideToggle("slow"); $("#sous_tarifs_prestations").slideToggle("slow"); } </script> <div align="center" id="menu" >   <div id="block_accueil"> <div id="accueil" class="bouton"> Acceuil </div> </div>   <div id="block_tarifs_prestations" > <div id="tarifs_prestations" class="bouton" onmouseover="afficher(id);"> Tarifs </div> <div id="sous_tarifs_prestations" class="sous_menu" onmouseout="afficher(id);"> <a href="ongles.php">Les ongles</a><br/> <a href="bienetre.php">Bien être</a><br/> <a href="esthetique.php">Esthétique</a><br/> <a href="makeup.php">Makeup</a><br/> <a href="mariage.php">Forfait Mariage</a><br/> </div> </div>   </div>

---

Je vous est mit qu'une partie, il ne faut pas abuser la lecture est déjà assez longue.

Toutefois il est intéressant de noter qu'il s'agit d'une <div> menu das un page inclus, je pouvais bien sur mettre le JS dans le head, mais je n'y ai pas vu de différence donc bon.

Voila je vous remercie si vous pouviez m'aiguiller sur ce sujet.

Déjà, lorsque tu utilises du jQuery, autant le faire jusqu'au bout et l'utiliser pour gérer les événements, c'est plus propre et évite d'utiliser les attributs événements... D'autre part, cela te donne au accès à des événements spéciaux mouseenter et mouseleave :

Code:

---

1 2	$('#tarifs_prestations').on('mouseenter', afficher); $('#sous_tarifs_prestations').on('mouseleave', masquer);

---

Note que j'ai supprimé le passage d'argument puisque tu ne t'en sers pas... :aie:

D'autre part, il faut gérer les éventuelles successions d'effets :

Code:

---

1 2 3 4 5 6

function masquer(){ $("#sous_tarifs_prestations").stop().slideToggle("slow"); } function afficher(){ $("#sous_tarifs_prestations").stop().slideToggle("slow"); }

---

eventuellement stop() accepte optionnellement deux paramètre boolean pour specifier si tu stoppes l'animation en l'état ou que tu reinitialises au temps 0

Bonjour Bovino,

Tres intéressant je n'ai pas encore tester.
Je ne connaissait pas ces événements spéciaux mouseenter et mouseleave:

Je suppose que ceci :

Code:

---

1 2 3

$('#tarifs_prestations').on('mouseenter', afficher); $('#sous_tarifs_prestations').on('mouseleave', masquer);

---

Dois être appelé au chargement du body ?

Pour le passage d'argument pas de problème tu n'avais pas tout le code j'ai copié qu'un seul partie a terme il y aura qu'un fonction avec passage d'argument.

Quoi que je dis une ânerie si le premier cadre dois être appeler au chargement de la page, alors pas d'argument il me faut juste prévoir toutes les lignes.

Donc oui merci, je regarde cela rapidement.

Bonjour SpaceFrog,

Merci de ces informations complémentaires.

Cependant je ne comprend pas bien l’intérêt de passer des arguments a stop()?

aurai tu un exemple? stp?

Bon alors super cool cela fonctionne épatant.

cependant j'ai plusieurs éléments de menu. je désir avoir qu'un seul fonction afficher et une seul fonction masqué, qui agira sur chaque élément .

J'ai fait un essai mais cela n'est pas très concluant.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<script> function chargementMenu() { $('#tarifs_prestations').on('mouseenter', afficher('tarifs_prestations')); $('#sous_tarifs_prestations').on('mouseleave', masquer('tarifs_prestations')); }   function afficher(TheId) { alert('ici'); $("#sous_"+TheId).stop().slideToggle("slow"); // $("#sous_tarifs_prestations").stop().slideToggle("slow"); }   function masquer(TheId) { $("#sous_"+TheId).stop().slideToggle("slow"); // $("#sous_tarifs_prestations").stop().slideToggle("slow"); }     </script> <div align="center" id="menu" >   <div id="block_accueil"> <div id="accueil" class="bouton"> Acceuil </div> </div>   <div id="block_tarifs_prestations" > <div id="tarifs_prestations" class="bouton"> Tarifs </div> <div id="sous_tarifs_prestations" class="sous_menu"> <a href="ongles.php">Les ongles</a><br/> <a href="bienetre.php">Bien être</a><br/> <a href="esthetique.php">Esthétique</a><br/> <a href="makeup.php">Makeup</a><br/> <a href="mariage.php">Forfait Mariage</a><br/> </div> </div>   </div>

---

Merci d'avance

ben tu definis si ton deroulement se fait jusqu'à la fin ou se stoppe au milieu de son deroulement .

D'accord, étrange y a t'il une réel utilité a faire ce genre de chose?

N'oublier pas mon post #6 :)

ben dans ton cas de figure il n'y a en effet aucun intérêt a stopper le déroulement au milieu ...
dans certains cas tu peux vouloir par le suite reprendre l'animation à partir d'ou tu l'avais arrêtée précédemment ...

pour le #6 je n'ai pas compris la problématique ...

Ha d'accord.
Bon je vais essayer d'etre clair.

Dans l'exemple ci dessus nous avons traité un cas de déroulage de menu.

Dans mon menu j'en ai deux ou trois de plus avec des id différents.

Code:

---

1 2 3 4 5 6 7

function masquer(){ $("#sous_tarifs_prestations").stop().slideToggle("slow"); } function afficher(){ $("#sous_tarifs_prestations").stop().slideToggle("slow"); }

---

Dans mes fonction afficher() et masquer() je traite un cas du menu sur les 4.
Si je veux traiter les autres je ne peux les rajouter dans mes fonctions afficher() et masquer(). Car tout le monde se déroulerai et s'enroulerai en meme temps.

Je voulais donc avec ces deux fonction automatiser avec des variables, mais j'ai un souci avec le passage de paramètre

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

function chargementMenu() { $('#tarifs_prestations').on('mouseenter', afficher('tarifs_prestations')); $('#sous_tarifs_prestations').on('mouseleave', masquer('tarifs_prestations')); }   function afficher(TheId) { alert('ici'); $("#sous_"+TheId).stop().slideToggle("slow"); // $("#sous_tarifs_prestations").stop().slideToggle("slow"); }   function masquer(TheId) { $("#sous_"+TheId).stop().slideToggle("slow"); // $("#sous_tarifs_prestations").stop().slideToggle("slow"); }

---

Suis je plus clair ?

ben mets tes ids séparés par des, dans le selecteur et mets $(this) dans la fonction

Code:

---

1 2 3

$('#id1,#id2,#id3').on('mouseenter', afficher($(this)); $('#id1,#id2,#id3').on('mouseenter', masquer($('#id1,#id2,#id3').not($(this)) );

---

Heu, je veux bien mais cela ne fonctionne pas.

Cela me renvoi un objet des le chargement on rien quand la souris passe dessus.

j'ai essayer des variante en reprenant le code de base et en ajoutant petit a petit les élément ... non je n'ai pas l'impression que cela fonctionne.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<script> function chargementMenu() { $('#presentation,#tarifs_prestations,#RDV').on('mouseenter', afficher($(this))); $('#sous_tarifs_prestations,#sous_tarifs_prestations,#sous_RDV').on('mouseleave', masquer($('#presentation,#tarifs_prestations,#RDV').not($(this)))); }   function afficher(TheId) { alert(TheId); $("#sous_"+TheId).stop().slideToggle("slow"); // $("#sous_tarifs_prestations").stop().slideToggle("slow"); }   function masquer(TheId) { $("#sous_"+TheId).stop().slideToggle("slow"); // $("#sous_tarifs_prestations").stop().slideToggle("slow"); }     </script>

---

Pouvez vous m'en dire plus de not() ? j'ai lu que c'étais un sélecteur mais j'avoue que c'est un peu flou???

tu es oblgé de passer par on() ce sont des elements créés dynamiquement ?

Code:

---

1 2 3 4 5 6

function chargementMenu() { $('#presentation,#tarifs_prestations,#RDV').mouseenter( afficher($(this)); $('#sous_tarifs_prestations,#sous_tarifs_prestations,#sous_RDV').mouseleave( masquer($('#presentation,#tarifs_prestations,#RDV').not($(this)); }

---

heu non,

c'est Bovino qui a dis que c'étais mieux dans le poste #2.

Avant cela mon menu ne fonctionnais pas me dira tu ....

Quel est ton idée?

Plus besoin de tes fonctions
Colle les animation direct dasn les mouseentern ete mouseleave

Code:

---

1 2 3 4 5 6

function chargementMenu() { $('#presentation,#tarifs_prestations,#RDV').mouseenter( $(this).stop().slideDown('slow')); $('#sous_tarifs_prestations,#sous_tarifs_prestations,#sous_RDV').mouseleave( $('#presentation,#tarifs_prestations,#RDV').not($(this)).slideUp('slow'); }

---

Bonsoir SpaceFrog,

Alors, j'ai tester ton code il a l'air bien sympa bien que je n'ai pas encore eu le temps de détailler tout ceci et oui c'est le week end..
mais comme resultat j'ai mes menu qui disparaisse complétement au chargement de la page. Ba alors? Qu'a cela ne tienne j'ai enlever le display bloc du css des sous menu, et au chargement je voit les sous menu monter cacher les menu... Mhhh je pense que quelque chose cloche peut etre dans les ordres. je regarde cela demain je pense.

au cas ou je colle ma fonction que j'appel au onload du body.

Code:

---

1 2 3 4 5 6 7

function load_Menu() { $('#presentation,#tarifs_prestations,#RDV').mouseenter( $(this).stop().slideDown('slow')); $('#sous_tarifs_prestations,#sous_tarifs_prestations,#sous_RDV').mouseleave( $('#presentation,#tarifs_prestations,#RDV').not($(this)).slideUp('slow'));   }

---

Bonne soirée

Alors j'ai fait des test,
J'ai modifier un peu le code.

j'ai reussit a revoir mon menu, cependant les sous menu ne souvre plus:

Code:

---

1 2 3

$('#presentation,#tarifs_prestations,#RDV').mouseenter( $(this).stop().slideDown('slow')); $('#tarifs_prestations,#tarifs_prestations,#RDV').mouseleave( $('#sous_presentation,#sous_tarifs_prestations,#sous_RDV').not($(this)).slideUp('slow'));

---

c'est la seul combinaison qui donnait un résultat, et j'ai un message d'erreur,
cet objet ne gère pas cette propriété ou cette méthode, jquery.js ligne: 3616

A mon avis cela n'est pas géré par jquery je me trompe?