Men? vertical desplegable tipo acorde?n con jQuery

Hace alg?n tiempo vimos c?mo poner un men? vertical desplegable con jQuery, muy presentable, pero su dise?o est? enfocado m?s a mostrar contenido en vez de subpesta?as. Contrario al que veremos ahora, el cual es un men? vertical desplegable con efecto deslizante que s? tiene subpesta?as por lo 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

Lo primero que haremos ser? insertar el script en la plantilla, para ello entra en Plantilla | Edici?n de HTML y antes de </head> agrega 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.
// This notice MUST stay intact for legal use
// ---------------------------------
$(document).ready(function()
{
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFtaw_piSU7uBHWYeSWcpuj0TPqPyO9qKqZtnDF9i3UJztrrUCDH3D-FSZtJDJyQTRXsxODwURJd9AHUV0mZmfl5SIrBvsXaNbregXUMkbTF6w54j33z5HNdEri8a5yID8p01LyzaBCNs/)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT_DRbH7q5Xxlz51nqvKMiLP-fr__e9W0R32fJewykDgeLuSWq6KP3aauYaoXV_uvUfogx0dT22vvUkCbXVEmdRjC680pNBkCo7T0Aeb8e8nuDrxRZgpq90nuWg-nXbazuFaz-ytp18-g/)"});
});


$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFtaw_piSU7uBHWYeSWcpuj0TPqPyO9qKqZtnDF9i3UJztrrUCDH3D-FSZtJDJyQTRXsxODwURJd9AHUV0mZmfl5SIrBvsXaNbregXUMkbTF6w54j33z5HNdEri8a5yID8p01LyzaBCNs/)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT_DRbH7q5Xxlz51nqvKMiLP-fr__e9W0R32fJewykDgeLuSWq6KP3aauYaoXV_uvUfogx0dT22vvUkCbXVEmdRjC680pNBkCo7T0Aeb8e8nuDrxRZgpq90nuWg-nXbazuFaz-ytp18-g/)"});
});
});

//]]>
</script>

Ahora antes de ]]></b:skin> a?ade 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/AVvXsEiT_DRbH7q5Xxlz51nqvKMiLP-fr__e9W0R32fJewykDgeLuSWq6KP3aauYaoXV_uvUfogx0dT22vvUkCbXVEmdRjC680pNBkCo7T0Aeb8e8nuDrxRZgpq90nuWg-nXbazuFaz-ytp18-g/);
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 entra en Dise?o | A?adir un gadget | HTML/Javascript, y ah? pega 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>

Como siempre en color verde he 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