De las  faqs y consultas de desarrolloweb

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 saludos

La FAQ Pregunta sobre diseño tiene

• Una respuesta
• 2 comentarios no revisados

Pertenece a la categoría:

• Diseño web

Respuesta de Cristian Avila Montalvo

21/1/09

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.