Efecto para un menu desplegable

Hola colegas, Estoy con un desafío de diseño. Y es un "efecto" muy útil cuando las páginas por el contenido, se "alargan", demasiado, y no se...

La FAQ Efecto para un menu desplegable tiene

Pertenece a la categoría:

Pregunta
Hola colegas,


Estoy con un desafío de diseño. Y es un "efecto" muy útil cuando las páginas
por el contenido, se "alargan", demasiado, y no se ven bien.


Para ordenar los contenidos, he visto. que al pulsar un enlace, "se abre", un
área que los contiene. Esta area se abre y se cierra, alargando y acortando
la pagina.


en esta direccíon podrás ver este efecto, que se parece mucho a los menus
desplegables, sólo que no contienen links, sino contenido de la pagina web.


Trato de descubrir la forma en que esto se hace. Si alguien tiene alguna idea
ya estoy agradecido.


Fíjate en esta pagina, en los subtitulos, "grupos electrógenos", "Potencias
de Generación", "Grupos Electrogenos Gas"


http://www.palmero.com/power_grupos.php


Respuesta de Cristian Avila Montalvo
Hola Jonás, en realidad el efecto que tú quieres hacer es uno de los más sencillos y útiles en páginas web, se llama slide slide down hace que aparesca y slide up hace que desaparesca, es más fácil aún si te ayudas de algún framework de javascript tal como mootools, prototype, jQuery, etc, yo personalmente prefiero jQuery, y te explico como se hace con esto.

1.- Entras a www.jquery.com y te bajas el archivo jquery.js
2.- En tu página web incluyes al archivo jquery que te bajaste.
3.- Creas un link con href="javascript:void(0)" y en el onclick le pones $('#idDelContenedor').slideDown('velocidad'), velocidad puede ser normal, fast o slow.
4.- Creas un div en donde va tu contenido el cual tiene el atributo style="display:none;".
5.- Ejecutas la página y das click en el link y listo este se despliega con el efecto slide.

Por si alguno de estos sencillos pasos no te quedú claro, te adjuno un ejemplo para que lo descomprimas y lo pruebes, tiene el slide down y el slide up, existen muchos otros efectos para aplicar esto.

Espero que te sirva y practica mucho.

Complementar la respuestaComplementar la respuesta
Volver al árbol de categoríasVolver al árbol de categorías

Comentarios
Fueron enviados 3 comentarios a la faq
1 comentario no revisado
2 comentarios revisados:
Por: cuentos30
17/1/09
Yo complementaría la primera respuesta con dos cosas. Lo primero, éste es el enlace oficial del efecto slideDown de jQuery que se menciona:

http://docs.jquery.com/Effects/slideDown

Ahí puedes encontrar tus respuestas a cómo hacerlo. De todas formas, mi segunda aportación es la siguiente: para que te funcione el slide (al menos de la forma como se expone en el este enlace) debes insertar el código de javascript que aparece en el centro de la misma dentro de dos etiquetas de script que debes colocar justo después de la etiqueta BODY de tu documento. Así es en general con los códigos de jQuery.

Si en un futuro vas a querer hacer más mejoras visuales de este tipo en tu página, te recomiendo que vayas introduciendote en jQuery. Yo lo hice hace unos meses y estoy encantado. Además, como cada vez más programadores y diseñadores se están metiendo, cada día hay más "plugins" para jQuery. Un "plugin" es simplemente otro archivo de javascript (.js) que vas a llamar después del de jQuery en el HEAD de tus páginas, y con el cuál vas a conseguir efectos sorprendentemente complejos sin escribir ni una sola linea de codigo javascript!!! por ejemplo un Gallery. Fíjate en algo como esto:

http://www.elgrandia.de/tu-fiesta/index.php?pag=invitaciones-para-tu-fiesta

haz clic sobre las miniaturas del centro de la página y disfruta del despliegue visual y su alta funcionalidad. Luego mira el código fuente de la página y verás que apenas tuve que crear un DIV con varias imagenes dentro y asignarles un ID y un CLASS concretos.

Que lo disfrutes!!!

SERGI

jhonatt...
Ayuda
28/4/09
Hola, amigos, que tal...tengo un problema con los menus desplegables, en internet encontré una pagina donde suministran los archivos en java y la hoja de estilo.
EL problema es cuando lo monto en la pagina, con mozilla se despliega pero es tapado por otras capas y en ie no se despliega.
Gracias de antemano por la respuesta.

Volver al árbol de categoríasVolver al árbol de categorías
Alojados en el grupo