Menú tipo acordeón con efecto deslizante

Sin duda Mootools es una de las librerías más completas en efectos para páginas web aunque no es tan popular como otras librerías de efectos.
Este es un buen ejemplo de los atractivos efectos que se pueden conseguir con esta librería, se trata de un menú de imágenes tipo acordeón que se desliza suavemente cuando se pasa el cursor sobre él.
El menú es de ByScripts el cual ellos lo llaman Byslidemenu y ha sido Robinson quien me ha pedido que explique su instalación.
Hay dos versiones, el menú horizontal y el menú vertical.


Puedes ver funcionando el ejemplo en este blog de pruebas.


Antes de ponerlo considera que, Mootools no es compatible con la mayoría de las librerías de efectos, así que si usas jQuery, Prototype o Scriptaculous estoy casi seguro que no les funcionará.
Además que es un menú de imágenes, así que cada quién deberá crear sus imágenes con sus textos o lo que se le quiera agregar a la imagen.

Bien, habiendo aclarado lo anterior empecemos, primero hay que descargar este archivo, descomprimirlo y subirlo en algún alojamiento.

Ahora entra en Diseño | Edición de HTML y pega antes de  lo siguiente:



Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pega uno de estos códigos.
Si deseas usar el menú horizontal pega esto:


O si deseas el menú vertical pega este:




Ya sólo cambia lo que está en color rojo por las URLs de tus imágenes y por las URLs de los enlaces. Las imágenes yo las he hecho de 300px de ancho y 225px de alto, pueden ser de cualquier otra medida, pero esa de ejemplo creo que da mejores resultados visuales.

Como ves la instalación es muy sencilla, el mayor trabajo estará en diseñar las imágenes del menú, pero al final seguro tendrás un menú mejor personalizado y poco usual.




Fuente: http://ciudadblogger.com/2010/06/menu-tipo-acordeon-con-efecto.html

No hay comentarios: