Menú desplegable con efectos script.aculo.us

Demasiado tiempo sin postear nada tras la remodelación de la web en la que decidí usar el servicio web de WordPress y retirar la antigua del hosting (bastante jaleo me da la otra). En esta nueva entrega os dejo el código de un menú desplegable construído a partir de una lista (elementos li) donde el truco para desplegar consiste en usar los efectos “Fade” y “Appear” de la librería Script.aculo.us. Naturalmente, podíamos haber obviado su uso, pero ¿por qué no darle un toque de misterio al menú?

Al hacer clic sobre los elementos del submenú, se generará una petición AJAX que, gracias a la librería Prototype, hará aparecer rápidamente el contenido deseado en el div que hemos preparado a tal efecto (div id=”paginas”)

El juego de archivos es el siguiente:

index.html –> donde se presenta el menú encerrado en un div

index.css –> donde se colocan espacialmente los div y se opta por un menú horizontal (puede, cómo no, colocarse en vertical)

funciones js –> donde incluímos las librerías citadas y una página donde se declaran las funciones que usamos para presentar los contenidos en el div “paginas”

pagina.php –> script que procesa la petición AJAX y muestra, en función de la opción elegida en el menú, el contenido (en el ejemplo, es solamente una frase, pero puede incluirse lo que se quiera … conexión con base de datos, formularios, etcétera)

imagen –> a modo de icono, cogida del proyecto Tango

Nada más. Es muy sencillo. Podéis verlo en funcionamiento aquí y descargar el paquete .zip aquí. No me voy sin darle las gracias a jesusvld por removerme la conciencia (gran web de la que es partícipe; no dejéis de visitarla)

Saludos y hasta pronto