Cómo instalar un elegante menú vertical tipo acordeón

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

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 Plantilla | Edición de HTML y pega antes de </head> lo siguiente:

<script src='URL del archivo mootools-core.js' type='text/javascript'/>
< script src='URL del archivo byslidemenu.js' type='text/javascript'/>
< style type='text/css'>
ul.bsm{
margin: 0px auto;
border:1px solid #B0B0B0;
list-style-type: none;
}
ul.bsm li{
border-left:2px solid #FFFFFF;
}
ul.bsm li.first{
border-style: none;
}
ul.vertical li,
div.vertical div{
border-top: 2px solid #FFFFFF;
border-left-style: none;
}
< /style>

Cambia lo que está en color verde por las URLs de los archivos que subiste previamente a tu alojamiento.

Luego pega antes de </body> esto:

<script type='text/javascript'>
window.addEvent(&#39;load&#39;, function(){
var slideMenu = new BySlideMenu();
var verticalmenu = new BySlideMenu(&#39;verticalmenu&#39;, {vertical: true});
});
< /script>

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:

<ul class="bsm" id="byslidemenu">
< li class="first"><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< /ul>

O si deseas el menú vertical pega este:

<ul style="display:none; visibility:hidden;" class="bsm" id="byslidemenu">
< li></li></ul>

< ul class="bsm vertical" id="verticalmenu">
< li class="first"><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< /ul>

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.