Wilbur Himself

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.

Entradas Relacionadas

• jQuery 101 (introducción)
• Google Doctype
• URLs limpias con Codeigniter
• SEO para diseñadores
• Javascript y AJAX para SEO
• CodeIgniter a primera vista

Esta entrada fué publicada el Jueves, 27 de Marzo, 2008 a las 6:40 pm.
Puedes seguir las respuestas a esta entrada por RSS 2.0.
Puedes dejar un comentario, o hacer trackback desde tu site.