fonction hover pour menu déroulant
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:
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:
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 :roll:
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 !:cry:
