Ir al contenido principal

Menú vertical desplegable tipo acordeón con jQuery


Hola amigos de Comunidad Bloggers, hoy lo que os traigo es un menu un menú vertical desplegable con efecto deslizante con subpestañas por el que podremos agregar enlaces a cada sección del menú.

Tiene dos variantes, puede desplegarse al hacer click, o puede desplegarse al pasar el cursor sobre él.


Funciona al hacer clickFunciona al pasar el cursor

Para empezar insertaremos el script en la plantilla, accediendo a  Diseño | Edición de HTML y antes de </head> agregamos lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
//------------------------------
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// www.comunidadbloggers.com
// ---------------------------------
$(document).ready(function()
{
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(https://lh5.googleusercontent.com/-BBN4_uSiCs4/TlQJSAXI5CI/AAAAAAAABnk/cmdGRetC38U/flecha-arriba.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(https://lh5.googleusercontent.com/-mQHPLQrjxcI/TlQJSHgEsZI/AAAAAAAABno/HbkoM9nbaWQ/flecha-abajo.png)"});
});


$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(https://lh5.googleusercontent.com/-BBN4_uSiCs4/TlQJSAXI5CI/AAAAAAAABnk/cmdGRetC38U/flecha-arriba.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(https://lh5.googleusercontent.com/-mQHPLQrjxcI/TlQJSHgEsZI/AAAAAAAABno/HbkoM9nbaWQ/flecha-abajo.png)"});
});
});

//]]>
</script>
Ahora antes de ]]></b:skin> añadimos los estilos:
/* Menú vertical desplegable
----------------------------------------------- */
.menu_list {
width: 180px; /* Ancho del menú */
}
.menu_head {
padding: 5px 10px;
color:#848484; /* Color de las pestañas principales */
cursor: pointer;
position: relative;
margin:1px;
margin-left:0;
margin-right:0;
font-weight:bold;
background-color: #424242; /* Color de fondo */
background-image: url(https://lh5.googleusercontent.com/-mQHPLQrjxcI/TlQJSHgEsZI/AAAAAAAABno/HbkoM9nbaWQ/flecha-abajo.png);
background-position:center right;
background-repeat:no-repeat;
}
.menu_body {
display:none;
}
.menu_body a{
display:block;
color:#848484; /* Color de los enlaces */
background-color:#BDBDBD; /* Color de fondo de los enlaces */
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.menu_body a:hover{
color: #000000; /* Color de los enlaces al pasar el cursor */
text-decoration:underline;
}
Por último entramos en Diseño> Elementos de la página> Añadir un gadget > HTML/Javascript, y ahí pegamos la estructura del menú.
Si quieres el que se activa al hacer click pega este código:
<div id="firstpane" class="menu_list">

<p class="menu_head">Pestaña 1</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>

<p class="menu_head">Pestaña 2</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>

<p class="menu_head">Pestaña 3</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>


</div>
Si quieres el que se activa al pasar el cursor entonces pega este código:
<div class="menu_list" id="secondpane">

<p class="menu_head">Pestaña 1</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>

<p class="menu_head">Pestaña 2</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>

<p class="menu_head">Pestaña 3</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>


</div>
Ya sólo cambia el nombre de las pestañas, de las subpestañas, y agrega las URLs de los enlaces donde se indica.

Si quieres agregar más subpestañas sólo añade debajo de la última subpestaña una línea como esta:
<a href="URL del enlace">Sub pestaña 3</a>
Y si quieres agregar otra pestaña con sus respectivas subpestañas agrega antes del último</div> un código como este:
<p class="menu_head">Pestaña 4</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>
En color verde hemos puesto las anotaciones donde puedes personalizar el menú como es el color de fondo, el texto, etc.

Las flechas son unas imágenes, si quieres cambiarlas deberás cambiar las URLs de estas imágenes que se encuentran tanto en el primer como en el segundo código.

Es un menú sencillo pero con la facilidad de agrupar varios enlaces y además con esos efectos deslizantes que a todos gusta.



Vía | Roshan's blog
Visto en| Ciudadblogger.com

Comentarios

  1. hola,gracias por el tutorial, sabes?? he intentado poner en un blog que estoy intentando crear, pero no me queda muy bien, al desplegar los submenus me kedan algunos links inservibles ,ose no dirigen a ningun lugar y me queda con el loguito de la flecha hacia abajo.
    este es mi blog,
    http://deperuymas.blogspot.com/

    Saludos.

    ResponderEliminar

Publicar un comentario

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

Entradas populares de este blog

5 alternativas open source a Loquendo

Loquendo es un programa que no necesita mucha presentación, principalmente porque lleva algo de tiempo entre nosotros y que en varias ocasiones, considero, que nos ha sido de gran ayuda al realizar vídeo tutoriales o bien algún proyecto educativo.
Loquendo se ha popularizado aún más en estos últimos años debido a que es utilizado por el popular colectivo Anonymus, para dar a conocer sus actividades.
En está ocasión les comparto 5 alternativas libres a este populoso programa.

Que es microsoft silverlight

Si entras a la pagina de Microsoft, o lees algun blog o revista sobre informática, encontrarás este nuevo término: Silverlight. Inclusive los gamers se verán envueltos por esta ola de novedades, pues la publicación del sitio de Halo 3 , uno de los juegos mas populares de Xbox, se hizo utilizando Silverlight para colocar videos en alta definición sobre trailers y escenas del juego.

Pero que es? para que sirve? quienes lo usan? Aca te dejo una simple pero clara definición, que encontré blogueando un poco.


Silverlight es un plugin que se instala en el navegador web, que en este caso significa Internet Explorer 6 o superior, Netscape 6+, Firefox 1.5+ en Windows XP y Vista; para Macintosh, Silverlight es soportado por Safari y Firefox. El plugin pesa algo así como 1.4 Mb.Silverlight es una versión reducida del framework de .NET (¡el framework completo de .NET es de 40+Mb!) enfocada a eficientar el manejo de multimedia dentro del navegador: video, audio, animación, interactividad, etc.Uno …

La beta de Windows 8 ya está disponible

La primera beta para usuarios de Windows 8, que ha recibido el nombre de Consumer Preview, ya puede descargarse desde la página de la compañía. Microsoft aprovechó el Mobile World Congress que se celebra en Barcelona para presentar este sistema operativo, que utilizará la nube para sincronizar la experiencia entre distintos dispositivos. La versión para desarrolladores (Developer Preview) deWindows 8 estaba disponible desde septiembre de 2011 y desde entonces ha sido descargada más de