jQuery dropdown est vraiment jumpy

Question

Je fais un menu déroulant avec jquery (une partie du code est empruntée à un tutoriel par quelqu'un, bien que j'oublie qui ...). Lorsque j'utilise la liste déroulante, elle glisse très rapidement et je ne peux pas la comprendre. Qu'est-ce que tu penses?

HTML

<div id="nav"> 
    <ul class="topnav"> 
    <li><a class="selected" href="#" title="home">home</a></li> 
    <li><a href="events/" title="events calendar">events</a></li> 
    <li><a href="photos/" title="photo gallery">photos</a></li> 
    <li><a href="staff/" title="faculty">staff</a> 
<ul class="subnav"> 
    <li><a href="#">Luke</a></li> 
    <li><a href="#">Darth Vader</a></li> 
    <li><a href="#">Princess Leia</a></li> 
    <li><a href="#">Jabba the Hutt</a></li> 
</ul> 
</li> 
<li><a href="contact/" title="contact">contact</a></li> 

jQuery $ (document) .ready (function() {$ ("ul.subnav") parent(). .hover (function() {

$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on hover... 

$(this).parent() .hover(function() { 
}, function(){ 
    $(this).parent().find("ul.subnav").slideUp('slow'); 
}); 
$(this).parent().find("ul.subnav") .hover(function() { 
}, function(){ 
    $(this).parent().find("ul.subnav").slideUp('slow'); 
}); 

}).hover(function() { 
    $(this).addClass("subhover"); 
}, function(){ 
    $(this).removeClass("subhover"); 
}); 

Answer 1

Vous pouvez utiliser la vitesse en millisecondes plutôt "lent" et "rapide". Essayez slideUp (1000) (ou 2000-3000 par exemple). Ça devrait glisser très doucement.

Answer 2

Voici une version plus simple d'une liste déroulante 1 lvl, pour plus de niveaux, c'est aussi simple que copier et coller, avec une petite modification de style. Espérons que cela vous aide

<script type="text/javascript"> 
$(document).ready(function(){ 

$('.menu-option').hover(mouse_in, mouse_out); 
function mouse_in(){ 
    $(' > div', this).slideDown("normal"); 
} 
function mouse_out(){ 
     $(' > div', this).slideUp("fast"); 
} 

}); 

</script> 
     <style type="text/css"> 
ul div 
{ 
    display: none; 
} 
div{ 
    display :table-cell; 
    position: absolute; 
} 
.menu-option{ 
    display: block; 
    float: left; 
    width: 120px; 

} 
.menu-option ul{ 
    z-index: 100; 
} 
</style> 


<ul> <li class="menu-option"> MENU 1 
      <div> 
       <ul> 
        <li>sub menu 1 1 </li> 
        <li>sub menu 1 2 </li> 
        <li>sub menu 1 3 </li> 
       </ul> 
      </div> </li> <li class="menu-option"> MENU 1  <div> 
       <ul> 
        <li>sub menu 1 1 </li> 
        <li>sub menu 1 2 </li> 
        <li>sub menu 1 3 </li> 
       </ul> 
      </div> </li> 
     <li class="menu-option"> MENU 1  <div> 
       <ul> 
        <li>sub menu 1 1 </li> 
        <li>sub menu 1 2 </li> 
        <li>sub menu 1 3 </li> 
       </ul> 
      </div> </li> 
     <li class="menu-option"> MENU 1  <div> 
       <ul> 
        <li>sub menu 1 1 </li> 
        <li>sub menu 1 2 </li> 
        <li>sub menu 1 3 </li> 
       </ul> 
      </div> </li> </ul>