JMiur [E]

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:
slideMenu.build('sm',200,10,10,1);
Y el código completo del ejemplo puede verse en este archivo de texto

15 comentarios:

Mundo Libre10  

Magistral, jejeje gracias gran Jmiur esa herramienta me sera de grab utilidad mil gracias !!!!

Responder
Mundo Libre10  

Gran Jmiur habra un menu vertical con el mismo efecto?

Responder
Jony  

Muchas gracias Jmiur... guardo esta gran entrada a favoritos... porque casi seguro que la use en un futuro no muy lejano...

Como siempre, Magistral!

Responder
JMiur  

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.

Responder
Gem@  

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 ;)

Responder
JMiur  

Sí, Gem@, es mucho más liviano porque no utiliza ninguna librería extra.

Responder
Nav!´s  

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.

Responder
JMiur  

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.

Responder
RANCHO VIRTUAL  

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

Responder
Educación Especial Salina Cruz  

grandioso. pero, si solo quiero implementarlo en una entrada de blog. como le hago? podrias darme los pasos? gracias y estaré muy agradecido. saludos

Responder
JMiur  

Es igual.

Debes colocar el script en la entrada usando un archivo externo, luego el estilo CSS entre etiquetas STYLE pero todo en una sola línea.

Luego el código HTML tambien en una sola línea y por úlltimo la llamada:
<script type='text/javascript'>slideMenu.build('ID',ancho,v1,v2,n);</script>

Responder
piXel  

Ya que no logré hacer andar el otro script, vamos a probar con este..

hay alguna forma de hacerlo funcionar sin tener un archivo externo?? es para ponerlo en una entrada... igual al que tenés de ejemplo

Responder
JMiur  

En este post, el ejempl se carga desde un archivo externo.

Cualquier script se puede poner en un post pero, si es complejo, tendrás problemas ya que debe ser escrito en una sola línea.

Responder
Hugo Turrós  

Hola: no puedo ver el código completo que está posterior a esta frase: "Y el código completo del ejemplo puede verse en este archivo de texto". Puedes ponerlo en otro lugar?. Mil gracias

Responder
JMiur  

Simplemente, debes descargar el archivo de texto.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

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 ...

 
CERRAR