Menú vertical desplegable tipo acordeón con jQuery

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