Menú tipo acordeón con efecto deslizante para tu blog

Estamos ante un menú elaborado con la librería Mootools, que no es tan popular como otras pero abunda notablemente en efectos para páginas web.

Se trata de un menú tipo acordeón construido con imágenes que se desliza suavemente al pasar el cursor por encima. Ideado por ByScripts y conocido también como Byslidemenu.

Encontramos dos modelos, uno vertical y otro horizontal.

Puedes ver el ejemplo en funcionamiento justo a continuación:

Antes de instalarlo debes considerar que Mootools no es compatible con librerías de efectos como jQuery, Scriptaculous o Prototype por lo que si utilizas alguna de éstas últimas en tu plantilla, ten por seguro que obtendrás algún error.

Otro factor a destacar es su composición. Es un menú de imágenes por lo que cada uno debe crear sus propias imágenes con el texto que se desee.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y agrega esto antes:

<script src='https://sites.google.com/site/scriptsbalcon/b/bljjacord2.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptsbalcon/b/blAcordeJTE.js' type='text/javascript'/>
<style type='text/css'>#blAcordeeJTE{width: 178px;overflow: hidden;padding: 0;position: relative;margin: 0px auto;list-style-type: none;border-top:none;}#blAcordeJTE {width: 640px; overflow: hidden;padding: 0;position: relative;margin: 0px auto; border:2px solid #cccccc; list-style-type: none;border-left:none;}ul.bljj1 li{border-left: 2px solid #CCCCCC;}ul.bljj2 li{}ul.blAcordeeJTE a li, div.blAcordeeJTE a div{border-left: none;}</style>

Ahora localiza la etiqueta </body> y antes incluye lo siguiente:

<script type='text/javascript'>
window.addEvent('load', function(){
var slideMenu = new blAcordeJTE();
var blAcordeeJTE = new blAcordeJTE('blAcordeeJTE', {vertical: true});
});
</script>

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código en su interior:

Si deseas usar el menú horizontal utiliza este:

<ul class="bljj1" id="blAcordeJTE">
<li class="first"><a href="URL ENLACE"><img src="URL IMAGEN" /></a></li>
<li><a href="URL ENLACE"><img src="URL IMAGEN" /></a></li>
<li><a href="URL ENLACE"><img src="URL IMAGEN" /></a></li>
<li><a href="URL ENLACE"><img src="URL IMAGEN" /></a></li>
</ul>

O este otro si deseas usar el menú vertical:

<ul class="bljj2" id="blAcordeeJTE" style="width: 178px;">
<li class="first"><a href="URL ENLACE"><img src="URL IMAGEN" /></a></li>
<li><a href="URL ENLACE"><img src="URL IMAGEN" /></a></li>
<li><a href="URL ENLACE"><img src="URL IMAGEN" /></a></li>
<li><a href="URL ENLACE"><img src="URL IMAGEN" /></a></li>
</ul>

Cambia URL ENLACE por la dirección de los enlaces y URL IMAGEN por las URL de tus imágenes.

Para ampliar el menú añadiendo más imágenes utiliza líneas como esta:

<li><a href="URL ENLACE"><img src="URL IMAGEN" /></a></li>

Recuerda que siempre deben situarse antes de </ul>.

Con respecto al tamaño de las imágenes, yo las construí con 220 píxeles de ancho y 246 de alto. Puedes utilizar el tamaño que mejor se ajuste a tu blog aunque el mejor resultado ofrece es el que utilicé en el ejemplo.

Y con esto terminamos la sencilla instalación, en la cual el mayor trabajo estará en diseñar las imágenes del menú. Por suerte, obtendrás un artilugio personal y único.