Un acordeón horizontal en sólo unas líneas

JMiur

Slidemenu es otro mini-script de Leigerber que, con solo unas líneas, nos da la posibilidad de crear una acordeón horizontal donde podemos agregar menúes, imágenes o cualquier otro contenido.

¿Qué necesitamos? El script que podemos descargar de su página y que tiene dos variaciones: el original funciona cuando colocamos el mouse encima de la solapa

y la variante que hace lo mismo pero las solapas se cierran cuando quitamos el mouse

Sea cual sea la que elijamos, el ZIP contiene un ejemplo completo aunque, lo que necesitamos es muy poco.

Primero subimos el script a un servidor y lo cargamos en la plantilla antes de </head>:

<script src='URL_slidemenu.js' type='text/javascript'></script>

Luego, agregamos el estilo CSS que tendrá muchas variantes pero que, como mínimo dice esto:

<style type='text/css'>
.sm { /* es la clase genérica */
display: block;
height: VALORpx; /* el alto de la imagen o bloque */
list-style: none;
overflow: hidden
width: VALORpx;  /* el ancho total que normalmente será 100% */
}
.sm li { /* cada una de las solapas */
display: inline;
float: left;
overflow: hidden
}

</style>

Podemos crear utilizar la cantidad de solapas que queramos ya que será el mismo script el que se encargue de "repartirlas" de manera pareja a lo ancho. Esas solapas son sólo items de una lista así que sus propiedades CSS pueden ser múltiples, imágenes de fondo, bordes, tamaño, etc.

Creamos el menú con un poco de HTML; por ejemplo:

<ul id="nombre" class="sm">

<li>el contenido de la primera solapa</li>
<li>el contenido de la segunda solapa</li>
<li>el contenido de la tercera solapa</li>
</ul>

Por último, llamamos a la función correspondiente. Esto, lo podemos hacer de varias formas. En general, lo razonable sería agregarlo a la etiqueta body:

<body onload="slideMenu.build('ID',ancho,v1,v2,n)">

Pero, en Blogger, esto es complejo ya que el editor suele rechazarlo o bien transformarlo en algo ininteligible e inútil así que lo mejor es agregar la función justo antes de </body> o después del código HTML del acordeón; en ambos casos, el código es el mismo:

<script type='text/javascript'>slideMenu.build('ID',ancho,v1,v2,n);</script>

Donde los parámetros son:

ID es el nombre del atributo ID del bloque (por defecto 'sm')

ancho es el ancho máximo en pixeles de la solapa expandida

v1 y v2 son las velocidades de reacción para desplegarse (1 es lo más rápido)

n es el número de la sección que se verá expandida

En este ejemplo, la función dice: