Menú Deslizante Jquery

¿Alguien sabe si hay un complemento de JQuery que creará un menú “deslizable hacia abajo” similar al que se muestra aquí: http://www.bu.edu/

No estoy seguro si estoy usando el término correcto para este tipo de menú y he estado buscando en Google y StackOverflow por algún tiempo sin éxito …

¡Gracias por adelantado!

¿Has probado un enfoque sin usar js o jQuery?

Quiero decir, puedes hacerlo usando HTML5 con transiciones CSS3.

Se verá así:

HTML:

 

CSS

 a { font-family: verdana; color: #fff; font-size: 11px; } a:hover { color: #cff; } #menu { background: #666; height: 30px; width: 377px; transition:height 0.5s; -webkit-transition:height 0.5s; } #menu:hover { height: 200px; } ul { padding: 0; margin: 0; padding-right: 10px; position: absolute; } ul li { float: left; display:block; padding: 10px; margin: 0; background: #333; border-right: 1px solid #666 } #outset { width: 377px; height: 200px; background: #900; } 

Echa un vistazo a este ejemplo JsFiddle


EDITAR

Para encajar su pregunta, hice algunos cambios en el código anterior y agregué un poco de jQuery. Me gusta esto:

 $(document).ready(function() { $("#subMenu").hide(); }); $("#menu").hover( function() { $("#subMenu").show('fast'); }, function() { $("#subMenu").hide('fast'); } ); 

Puedes ver los resultados en este ejemplo de JsFiddle.

Eso sería muy fácil de construir sin un complemento. Cree un div de submenú y configure el display: ninguno en el CSS.

Luego, cree un oyente de desplazamiento para “deslizar hacia abajo” el submenú.

En la parte del mouseout del evento flotante, en lugar de simplemente cerrar el submenú, ajuste el cierre del submenú en un setTimeout de 200 ms, y luego agregue un evento mouseover en el submenú para cancelar el setTimeout: (de lo contrario, el submenú se cerraría inmediatamente después de saliendo del menu)

 var menuTimer; $("#menu").hover(function() { //Slide down the submenu $("#sub_menu").slideDown(); }, function() { //Create a 200ms timer, after which it will close the sub_menu menuTimer = setTimeout(function() { $("#sub_menu").slideUp(); },200); }); $("#sub_menu").mouseenter(function() { //The user entered the submenu, so cancel the timer (don't close the submenu) clearTimeout(menuTimer); }); 

¿Por qué no haces tu propio menú? prueba con una lista

    y jQuery .mouseover() para crear un div .show() con efecto blind de jQuery UI

    Echa un vistazo a esto: menú desplegable

     $('li').mouseover(function() { var this_menu = $(this).attr('class'); if($('.menu_div').is(':visible')) { $('.menu_div').hide('blind', 'fast'); } $('#' + this_menu).show('blind', 'fast'); }); $('.menu_div').mouseout(function() { var this_menu = $(this).attr('class'); $('.menu_div').hide('blind', 'fast'); }); 

    Está hecho con jQuery y jQuery-UI, por lo que si lo usa, agregue a su documento la biblioteca jQuery y después de jQuery-UI jQuery-UI necesita jQuery para funcionar

    Intereting Posts