Cercando di creare un menu JQuery con un sottomenu che scorre verso l'alto al passaggio del mouse, e scorre verso il basso quando le uscite del mouse

Question

ho trovato qualcuno con un tutorial che mostra quello che sto essenzialmente dopo, però, la demo è per un sottomenu che scivola verso il basso invece di avere la diapositiva sottomenu sopra la voce di menu.

Ecco il link al tutorial:

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

Ecco lo script jQuery utilizza:

$(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);
        }
    );
});

Quando accendo lo slideUp per slideDown e viceversa, la cosa funziona abbastanza bene scorrevoli fino (funziona anche quando non li passare fuori!) - ma si suppone che lo scivolo verso il basso che ciò accada quando esco doesn' t realmente il lavoro. E 'come le scompare sottomenu, e poi finisce che è verso il basso traiettoria ho hover prossima volta su di esso.

Fondamentalmente, è tutto singhiozzo-y e molto inaffidabile.

Qualcuno ha qualche idea brillante per questo novizio?

Grazie mille!

Answer 1

spettacoli .slideDown un elemento partendo height:0 e poi anima la proprietà altezza per il suo valore. .slideUp anima l'altezza dal suo valore completamente abbassata a 0 e poi nasconde l'elemento. Al fine di creare l'animazione che si desidera non si può semplicemente passare in giro dal momento che si desidera slideUp per mostrare invece di nascondere e viceversa.

Se dovessi costruire quello descrivere, avrei indosso posizionare un elemento di un elemento posizionato relativamente al bottom:0 modo che quando animare la proprietà altezza sarebbe cresciuto dal basso. Poi vorrei creare function mySlideUp() tale che .show() è l'elemento interno che è inizialmente display:none; height:0 e poi .animate({height:'auto'},'slow'). Per function mySlideDown() avrei .animate({height:0},'slow') e poi hide().

Mi auguro che aiuta. Ha scritto in pseudo-jQuery dato che sei un principiante e sarebbe vantaggioso per voi a scrivere voi stessi. Buona fortuna!

Answer 2

Per chi cerca un menu di navigazione come quello che stavo cercando di raggiungere, il seguente sito può essere di aiuto:

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

Ma usando il consiglio di MHR, e nel guardare attraverso il modo Mr. B codificato la loro navigazione, sono stato finalmente in grado di ottenere un rotolo praticabile up di navigazione con pangrattato.

Grazie!