Un acordeón horizontal en sólo unas líneas
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>:
¿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:
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:
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:
slideMenu.build('sm',200,10,10,1);Y el código completo del ejemplo puede verse en este archivo de texto 
El escaparate de Rosa
Gem@ Blog
La Bloguería
9 comentarios:
Magistral, jejeje gracias gran Jmiur esa herramienta me sera de grab utilidad mil gracias !!!!
Gran Jmiur habra un menu vertical con el mismo efecto?
Muchas gracias Jmiur... guardo esta gran entrada a favoritos... porque casi seguro que la use en un futuro no muy lejano...
Como siempre, Magistral!
Hay un modelo como el que quieres, explicado en este post.
En principio, los verticales son más sencillos así que hay muchos otros del estilo.
Es genial, yo probé el mismo menú pero de Mootools y también con JQuery pero este parece mucho más liviano, hay que probarlo ;)
Sí, Gem@, es mucho más liviano porque no utiliza ninguna librería extra.
Hola Jmiur, disculpa mi ignorancia, pero no entendi eso de subir a un servidor el scrpit.
Manejar esto me es totalmente nuevo todavia no etiendo en su totalidad los scripts.
Saludos Cordiales.
El proceso es igual a subir imágenes, la diferencia es que no hay muchos sitios que nos permitan hacerlo.
La soluciòn más sencilla es usar Google Pages. Fíjate en este post que hay una explicaciòn paso a paso.
A mi me era mas util el vertical con scriptpaculous..pero era muy complicado y este es mas corto...igual me las arregle para usarlo en la sidebar:O
¿Quiere dejar un comentario?
Hay varios métodos posibles.
Uno de ellos es el formulario de comentarios que tan generosamente nos ha regalado Blogger y que funciona sólo de tanto en tanto. Su uso es aconsejable sólo en caso de ser una de esas personas a las que les gustan los retos y los desafíos.
¿No quiere arriesgarse? Haga click para ocultarlo y utilice las otras opciones.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...
Los comentarios están siendo moderados y serán publicados a la brevedad.