Bonjour à tous,

J'ai suivi un tuto récemment afin de créer un menu en slide-down/slide-up qui fonctionne avec je l'avoue quelques bugs qui font qu'il n'est pas aussi fonctionnel que je voudrais. C'est à dire que le slide-down s'effectue bien mais si l'utilisateur a le malheur de repasser sur les liens alors que le menu est en train de remonter et bien le menu refait l'aller retour autant de fois que le pointeur a survolé de liens... Très moche et pas fonctionnel du tout. Or je ne sais pas trop comment m'y prendre pour empêcher ce bug et je dois régler ce problème au plus vite (date de livraison très proche).

Sinon, l'autre aspect que je voulais aborder est le "delay" que je voudrais appliquer au survol de mon
Code : Sélectionner tout - Visualiser dans une fenêtre à part
<div class="menu-first">Menu</div>
car j'ai trois boutons à mon menu donc 3 dropdown, j'aimerai donc que cela soit plus doux.

Je sais que cela fait beaucoup d'un coup, mais si vous pouvez me donner des pistes ce serait top !

Voici mon code :

HTML
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
 
<div class="dropdown-menu1">
    <div class="menu-first">Menu1</div>
	<ul class="down-list" style="display:none;">
             <li><a href="./lien1.html">Lien 1</a></li>
	     <li><a href="./lien2.html">Lien 2</a></li>
	     <li><a href="./lien3.html">Lien 3</a></li>
	</ul>  
</div>
<div class="dropdown-menu2">
    <div class="menu-first">Menu2</div>
	<ul class="down-list" style="display:none;">
             <li><a href="./lien1.html">Lien 1</a></li>
	     <li><a href="./lien2.html">Lien 2</a></li>
	     <li><a href="./lien3.html">Lien 3</a></li>
	</ul>  
</div>
<div class="dropdown-menu3">
    <div class="menu-first">Menu3</div>
	<ul class="down-list" style="display:none;">
             <li><a href="./lien1.html">Lien 1</a></li>
	     <li><a href="./lien2.html">Lien 2</a></li>
	     <li><a href="./lien3.html">Lien 3</a></li>
	</ul>  
</div>
JS
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
 
$(document).ready(function(){
 
    $('.down-list1').width($('.dropdown-menu1').width()-2);
 
    $('.dropdown-menu1').hover(
      function () {
        $('.menu-first', this).addClass('slide-down'); 
        $('.down-list1', this).slideDown(600);
      }, 
      function () {
        obj = this;
        $('.down-list1', this).slideUp(600, function(){ $('.menu-first', obj).removeClass('slide-down'); });
      }
    );
 
});
Merci d'avance !