Tratar de crear un menú jQuery con un submenú que se desliza hacia arriba en vuelo estacionario, y se desliza hacia abajo cuando las salidas de ratón

Question

he encontrado a alguien con un tutorial que muestra lo que estoy esencialmente después, sin embargo, la demo es para un submenú que se desliza hacia abajo en lugar de tener la diapositiva en el submenú por encima del elemento de menú.

Aquí está el enlace al tutorial:

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

Aquí está la secuencia de comandos que utiliza jQuery:

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

Cuando cambio el slideUp para slideDown y viceversa, la cosa funciona lo suficientemente bien como se deslice hacia arriba (funciona incluso cuando no les interruptor hacia afuera!) - pero el tobogán hacia abajo que se supone que debe suceder cuando salgo doesn' t realmente el trabajo. Es como desaparece el submenú, y luego termina su trayectoria descendente de la libración próxima vez que sobre el mismo.

Básicamente, todo es hipo-y y muy poco fiable.

Alguien tiene alguna idea brillante para este novato?

Muchas gracias!

Answer 1

shows .slideDown un elemento a partir de las height:0 y luego anima la propiedad height a su valor completo. .slideUp anima la altura de su abajo valor completo a 0 y luego oculta el elemento. Con el fin de crear la animación que desea no se puede simplemente cambiar ellos alrededor, ya que desea slideUp para mostrar en lugar de ocultar y viceversa.

Si tuviera que construir lo describa, me posicionaría abolutely un elemento dentro de un elemento relativamente posicionado en bottom:0 para que cuando yo animo a la propiedad height crecería desde el fondo. A continuación, me gustaría crear function mySlideUp() tal que .show() es el elemento interno que es inicialmente display:none; height:0 y luego .animate({height:'auto'},'slow'). Para function mySlideDown() Me .animate({height:0},'slow') y luego hide().

Espero que ayude. Escribió en pseudo-jQuery ya que eres un novato y sería beneficioso para que usted escriba usted mismo. Buena suerte!

Answer 2

Para cualquier persona que busca un menú de navegación como la que yo estaba tratando de lograr, el sitio puede ser de ayuda:

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

Pero el uso de los consejos de MHR, y al mirar a través de cómo el Sr. B codificado su navegación, que finalmente fue capaz de conseguir un desplazamiento viable hasta la navegación con pan rallado.

Gracias!