Discussion :

[cedrick21]

Bonjour à tous,

afin de ma familiariser avec jQuery j'essaye de me faire un simple menu déroulant.

J'ai réussi à faire en sorte que lorsque l'on est sur un lien les autres ne soient pas déroulés (soit déroulé seulement le menu du lien "actif")

Voici 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
<div style="float:left">
	<a id="home" class="entete">Home</a>
	<ul id="div-home" class="hidden">
		<li><a href="index.php?page=page&p=home_rubriques">Accès aux différentes rubriques</a></li>
		<li><a href="index.php?page=page&p=home_modules">Accès aux différents modules</a></li>
		<li><a href="index.php?page=page&p=home_infoscom">Visualisation des informations commerciales</a></li>
		<li><a href="index.php?page=page&p=home_galerie">Visualisation de la galerie 2010 (photos + vidéos)</a></li>
	</ul>
	</div>
 
	<div style="float:left">
	<a id="salon" class="entete">Le salon</a>
	<ul id="div-salon" class="hidden">
		<li><a href="index.php?page=page&p=salon_but">Le but</a></li>
		<li><a href="index.php?page=page&p=salon_chiffres">Les chiffres</a></li>
		<li><a href="index.php?page=page&p=salon_other">Autres ?</a></li>
	</ul>
	</div>

et le jQuery qui va avec

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
45
46
47
48
49
50
51
52
$(document).ready(function(){
 
	var divOuvert	=	'';
 
	//si on passe sur un lien d'entête
	$('.entete').hover(function(){
 
		$('.hidden').each(function(){
 
			if(divOuvert!='' && divOuvert != 'div-'+$(this).attr('id'))
				$(this).slideUp(500);
 
		});
 
		$('#div-'+$(this).attr('id')).slideDown(500);
 
		divOuvert	=	'div-'+$(this).attr('id');
 
	}, function(){
 
		$('.hidden').hover(function(){
 
			$('.hidden').each(function(){
				if(divOuvert != $(this).attr('id'))
					$(this).slideUp(500);
			});	
 
		});
	});
 
	//si on passe dans le contenu d'un menu déroulant
	$('.hidden').hover(function(){
 
		var	nomDiv	=	$(this).attr('id');
 
		$('.hidden').each(function(){
 
			if(nomDiv != $(this).attr('id'))
				$(this).slideUp(500);
		});
 
	}, function(){
 
		$('.hidden').slideUp(500);
 
		divOuvert	=	'';
 
 
	});
 
 
});

c'est un peu barbare mais grosso modo lorsque je passe dans le contenu du menu déroulant (je fais donc un "out" du lien et je ne ferme pas le menu déroulant (normal je suis dedans).

On va dire que sur le principe ça me va (si y'a plus simple je suis preneur !)

Ce qui me chagrine c'est que si je sors du menu déroulant pour retourner sur le lien associé ("le titre" on va dire) alors mon menu se ferme puis se rouvre !

Or j'aimerais qu'il ne bouge pas et je ne vois pas comment l'empêcher si ce n'est repartir de 0 et de nouveau se casser la tête

En espérant que vous pourrez m'aider

Merci d'avance

J'espère avoir été explicite

Edit :
j'ai même trouvé un soucis supplémentaire à mon histoire ...
tant que je survole les titres entre eux tout va bien mais je survole un autre élément de la page alors le dernier menu déroulé reste déroulé

Quelle bazar de vouloir apprendre tout seul !

[SpaceFrog]

essaye avec mouseenter / mouseleave ou mouseover / mouseout

sinon regarde du coté de stop()