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);
15 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
grandioso. pero, si solo quiero implementarlo en una entrada de blog. como le hago? podrias darme los pasos? gracias y estaré muy agradecido. saludos
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>
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
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.
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
Simplemente, debes descargar el archivo de texto.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
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 ...