simplejidad

Menús Dropdown con jQuery

Una forma sencilla para lograr rápidamente esos menús con jQuery…

… Una lista sencilla en HTML …

<ul id="dropdown">
<li><a href="#">Link</a>
<ul>
<li><a href="#">sub-link</a></li>
</ul>
</li>
<li><a href="#">Link 2</a>
<ul>
...

Luego un poco de jQuery …

$(document).ready(function(){

// Escondo las listas que estan dentro del menu
$("ul#dropdown li ul").hide();

// Aplico la función hover() a los links que son hijos
// directos de los li's que son hijos directos del menu.
$("ul#dropdown > li > a").hover(function(){

// muestro la lista next-sibling del links seleccionado
$(this).next("ul").show();

// Callback ... esconder
}, function(){
$(this).next("ul").hide();
});

Lo próximo es hacer que cuando tengamos el mouse sobre una de las listas interiores, se mantengan visibles …

$("ul#dropdown li ul").hover(function(){
$(this).show();
}, function(){
$(this).hide();
});

});

… un ejemplo.