Foros del Web » Programando para Internet » Jquery »

Submenus con jQuery!

Estas en el tema de Submenus con jQuery! en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/08/2010, 19:29
 
Fecha de Ingreso: julio-2010
Mensajes: 19
Antigüedad: 11 años, 10 meses
Puntos: 1
Pregunta Submenus con jQuery!

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!! :)
  #2 (permalink)  
Antiguo 29/08/2010, 19:33
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 20 años, 1 mes
Puntos: 1284
Tema movido desde javascript
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 30/08/2010, 10:56
 
Fecha de Ingreso: julio-2010
Mensajes: 19
Antigüedad: 11 años, 10 meses
Puntos: 1
Respuesta: Submenus con jQuery!

Algun Tip?
  #4 (permalink)  
Antiguo 30/08/2010, 16:58
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 13 años, 1 mes
Puntos: 101
Respuesta: Submenus con jQuery!

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
Cita:
$("li").click( function() {

});
Y asignarles alternativamente una clase ".active"para reconocerlos y hacerles el fadeIn / Out.
  #5 (permalink)  
Antiguo 31/08/2010, 12:04
 
Fecha de Ingreso: julio-2010
Mensajes: 19
Antigüedad: 11 años, 10 meses
Puntos: 1
Respuesta: Submenus con jQuery!

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!
  #6 (permalink)  
Antiguo 31/08/2010, 12:31
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 13 años, 1 mes
Puntos: 101
Respuesta: Submenus con jQuery!

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

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

Cita:
$("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.

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:25.