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 click

Funciona 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXsXSClH1i9VPDFY3LnNoVVsGqxpCsLwBluem6LidogjXSQl-rKhA0KdVck0MkfWVZG_vHNPob4NPZ51TVO-BVXoweTKgOWpvzHj230t82RL9MUZN3kpcIicCShe71BdjAurpC63xhYiA/)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJkFrEpcazERpoJUjPGDExHux5FuWHEIT9bYp2Ic6MKBGk8k16jrMllxIQ7D8KXIVNVGeV9GgXUwmGv2l2bbsbPtCBrwJc4w-ZActCEXWEmjgd8owgBgkQ4l5LOTGSx6UTgw1qs3HMB2c/)"});
});


$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXsXSClH1i9VPDFY3LnNoVVsGqxpCsLwBluem6LidogjXSQl-rKhA0KdVck0MkfWVZG_vHNPob4NPZ51TVO-BVXoweTKgOWpvzHj230t82RL9MUZN3kpcIicCShe71BdjAurpC63xhYiA/)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJkFrEpcazERpoJUjPGDExHux5FuWHEIT9bYp2Ic6MKBGk8k16jrMllxIQ7D8KXIVNVGeV9GgXUwmGv2l2bbsbPtCBrwJc4w-ZActCEXWEmjgd8owgBgkQ4l5LOTGSx6UTgw1qs3HMB2c/)"});
});
});

//]]>
</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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJkFrEpcazERpoJUjPGDExHux5FuWHEIT9bYp2Ic6MKBGk8k16jrMllxIQ7D8KXIVNVGeV9GgXUwmGv2l2bbsbPtCBrwJc4w-ZActCEXWEmjgd8owgBgkQ4l5LOTGSx6UTgw1qs3HMB2c/);
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