Essayer de créer un menu JQuery avec un sous-menu qui glisse vers le haut et glisse vers le bas lorsque la souris quitte

Question

J'ai trouvé quelqu'un avec un tutoriel montrant ce que je suis essentiellement après, mais la démo est pour un sous-menu qui glisse vers le bas au lieu d'avoir le sous-menu glisser au-dessus de l'élément de menu.

Voici le lien vers le tutoriel:

http://www.darkscarab.com/blog/read.php?id=14

Voici le script jQuery utilise:

$(document).ready(function(){ 
    $(".submenu").slideUp(100, function(){$(".menu_item").css({overflow:'visible'})}); 
    $(".menu_item").hover(
     function(){ 
      if($(".submenu", this).queue().length < 2) 
       $(".submenu", this).slideDown(500); 
     },function(){ 
      $(".submenu", this).slideUp(500); 
     } 
    ); 
}); 

Lorsque je passe le slideUp pour slideDown et vice-versa, la chose fonctionne assez bien en glissant (fonctionne même quand je ne les éteins pas!) - mais le glissement vers le bas qui est censé se produire quand je sors ne fonctionne pas vraiment. C'est comme si le sous-menu disparaissait et finissait sa trajectoire descendante la prochaine fois que je le survolerais.

Fondamentalement, tout est hiccup-y et très peu fiable.

Quelqu'un at-il des idées brillantes pour ce novice?

Merci beaucoup!

Answer 1

.slideDown affiche un élément commençant à height:0, puis anime la propriété height à sa valeur complète. .slideUp anime la hauteur de sa valeur complète à 0 puis masque l'élément. Afin de créer l'animation que vous voulez, vous ne pouvez pas les changer parce que vous voulez que slideUp s'affiche au lieu de cacher et vice-versa.

Si je devais construire ce que je décris, je placerais de manière aboliente un élément dans un élément relativement positionné à bottom:0 de sorte que lorsque j'animerais la propriété height, il croîtrait à partir du bas. Ensuite, je créerais function mySlideUp() tel qu'il .show() est l'élément interne qui est initialement display:none; height:0 puis .animate({height:'auto'},'slow'). Pour function mySlideDown() je voudrais .animate({height:0},'slow') puis hide().

J'espère que cela aide. L'a écrit en pseudo-jQuery puisque vous êtes un novice et il serait bénéfique pour vous de l'écrire vous-même. Bonne chance!

Answer 2

Pour ceux qui cherchent un menu de navigation comme celui que je cherchais à atteindre, le site suivant peut être utile:

http://www.mrbandfriends.co.uk/

Mais en utilisant les conseils de mh, et en regardant à travers la façon dont M. B codé leur navigation, j'ai finalement réussi à obtenir une navigation scrollable avec de la chapelure.

Merci!