15 de febrero de 2013

Menú tipo acordeón - Posible Galería de Imágenes


Uno de nuestros lectores nos preguntaba cómo se hacía un menú de estos que tienen un estilo tipo acordeón. Este específicamente fue creado por ByScripts y voy a enseñarles cómo hacerlo. Primero les muestro el menú en su forma vertical y horizontal. Luego ustedes eligen cuál de los dos colocar en sus blogs.
Nota: A cada imágen le pueden poner un enlace si ustedes quieren, sino no. Por eso en el título le puse "posible galería de imágenes", porque pueden usarlo como menú o bien sin enlaces y usarlo como una mini galería de imágenes, esto lo deciden ustedes.




Menú Horizontal








Menú Vertical





Bien, si les gustó y quieren colocarlo en sus blogs es muy muy sencillo, presten atención.

Vamos a Diseño | Edición de HTML y pegamos antes de </head> lo siguiente:


<script src='http://dl.dropbox.com/u/85861485/Scripts/mootools-core.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/85861485/Scripts/byslidemenu.js' type='text/javascript'/>

<style type='text/css'>
ul.bsm{
margin: 0px auto;
border:1px solid #B0B0B0;
list-style-type: none;
}
ul.bsm li{
border-left:2px solid #FFFFFF;
}
ul.bsm li.first{
border-style: none;
}
ul.vertical li,
div.vertical div{
border-top: 2px solid #FFFFFF;
border-left-style: none;
}
</style>



Después pegamos antes de </body> esto:

<script type='text/javascript'>
window.addEvent(&#39;load&#39;, function(){
var slideMenu = new BySlideMenu();
var verticalmenu = new BySlideMenu(&#39;verticalmenu&#39;, {vertical: true});
});
</script>


Por último vamos Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pega uno de estos códigos, dependiendo de si hayamos elegido el menú vertical o el horizontal:


Si deseas usar el menú horizontal pega esto:

<ul class="bsm" id="byslidemenu">
<li class="first"><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
</ul>


O si deseas el menú vertical pega este:

<ul style="display:none; visibility:hidden;" class="bsm" id="byslidemenu">
<li></li></ul>

<ul class="bsm vertical" id="verticalmenu">
<li class="first"><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
</ul>

Ahora sólo nos toca reemplazar lo que está en rojo por las URL's correspondientes, de las imágenes y los enlaces a los que queremos que redireccione. Si deseamos que sea una galería de imágenes

Si vamos a hacer un menú deberíamos diseñar bien las imágenes para que quede presentable :)

Espero que les sirva. Saludos.

5 comentarios:

  1. hey amigo no me funciono solo me salen las imagenes separadas hacia abajo

    ResponderEliminar
    Respuestas
    1. Seguramente te hayas saltado algún paso. Fijate bien más que nada de poner bien lo que va antes de /head

      Eliminar
  2. Hola: Lo he puesto en mi blog de pruebas en horizontal y queda estupendo.sin embargo puse todo igual en mi blog real y me quedan todas las imágenes en fila y no sale el acordeón. ¿ A que puede ser debido?
    Muchas gracias

    ResponderEliminar
  3. Ya di con el error, no puedo ponerlo porque es incompatible con otro que tengo
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola!Si, es muy problable. Suele suceder con algunas plantillas :/ saludos!

      Eliminar