Discussion :

[darkterreur]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Bovino]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function masquer(){	
	$("#sous_tarifs_prestations").stop().slideToggle("slow");
}
function afficher(){	
	$("#sous_tarifs_prestations").stop().slideToggle("slow");
}

[SpaceFrog]

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

[darkterreur]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[darkterreur]

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?

[darkterreur]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

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