Submenus con jQuery!

[abbo]

Hola! soy diseñador, conosco algo de action-script de flash, y ahora me quiero mover un poco a lo que es jQuery para hacer sitios mas agradables e interactivos en html.

Estoy intentando hacer este menu http://leku.mx/t2/ el cual me gustaría implementar en un sitio a futuro, les explico de que se trata haber si ustedes me pueden ayudar o dar pistas.

1. Cada Item tiene un submenu:
En este ejemplo, solo el "item 1" tiene submenu, el objetivo es que pudiera agregar o quitar items del menu y que pudiera linkearlos a un submenu.

2. Submenus activos con mouseover o por pagina:
La funcionalidad del menu que quiero lograr es muy parecida a la de esta pagina, solamente que en lugar de hacer un "fade", yo tengo un efecto que se llama "blind":

http://www.metlife.com.mx/wps/portal/seguros/


Intente buscar en esta pagina como lo hicieron, pero no lo encontre, lo mas que logre fue hacerlo como un "toggle", si ustedes tienen algun dato o un tip, se los agradeceria enormemente.

saludos!! :)

[caricatos]

Tema movido desde javascript

[abbo]

Algun Tip?

[mayid]

El efecto blind existe dentro del paquete jQuery UI:
http://docs.jquery.com/UI/Effects

Pero no se parece al de la segunda galería que mostraste. Creo que mejor es hacer un fadeOut("fast") y luego un fadeIn("fast") con el nuevo contenido.

Si no vas a usar un menu prefabricado (un plugin quizás), entonces los pasos seria:

- añadir el evento click a los elementos li

$("li").click( function() {

});

Y asignarles alternativamente una clase ".active"para reconocerlos y hacerles el fadeIn / Out.

[abbo]

Si precisamente el efecto que quiero usar es el de "blind" de la librería de jQuery, el de la pagina de metlife es fade, lo que no logro hacer o no se como, es si necesito hacer una funcion que se pueda adaptar a todos, o programar boton por boton.

en realidad a mi me gustaria usar el identificador, y decirle, si es un boton y termina en "X" entonces despliga el submenu que termina en "X" asi a boton del menu podria ponerle 'bt1" y al submenu "sb1" es un ejemplo verdad, no tiene que ser tal cual, pero estaria bien que pudiera ser algo asi.


Saludos!

[mayid]

Si, podes usar un identificador como el que proponés.

Te doy un ejemplo aplicado a todos los li de clase "principal":

$("li.principal").click( function() {

$(this).children("li.secundaria").show("blind", { direction: "horizontal" }, 1000);

});

La lógica es:
- para todo li de clase principal, declaro un evento click.
+ dentro del script consecuente, $(this) hace mención al elemento que se clickeo.
- children es un selector jerarquico. Obtengo el hijo directo del elemento clickeado siempre y cuando sea un elemento de lista con clase "secundaria".
- declaro un modo show con el efecto bind.

Para poder usar todo esto es necesario que importes la librería jquery y también jquery UI.