Men? vertical desplegable con jQuery

Este es un sencillo pero pr?ctico men? vertical hecho con jQuery y CSS. Tiene un efecto deslizante que aunque su funci?n no es enlazar a alguna p?gina o secci?n de blog puede usarse para mostrar contenido dentro de �l y as? ahorrarnos un poco de espacio en el blog.

Redes sociales

Juegos

Plantillas

Para agregarlo a tu blog entra en Dise?o | Edici?n de HTML y antes de </head> pega esto:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.toggle_container&quot;).hide();
$(&quot;h2.togglemenu&quot;).click(function(){
$(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
return false;
});
});
</script>

Ahora antes de ]]></b:skin> pega lo siguiente:

h2.togglemenu {
padding: 0 0 0 30px;
margin: 0 0 5px 0;
background-image: -moz-linear-gradient(#AAAAAA, #000000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#AAAAAA), to(#000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AAAAAA,endColorStr=#000000);"
border: 1px solid #2E2E2E;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
height: 45px;
line-height: 45px;
width: 350px; /* Ancho de la pestaña */
text-transform:none !important;
font-size: 2em;
font-weight: 900;
font-family: Florence, cursive; /* Tipo de letra */
float:left;
}
h2.togglemenu a {
padding-left:40px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Nq1SBzu9lGBGXTSWcw2M_l02uwfpc4CaxTWrBZFk9PAtpk6QT8mg3ceqcnF247ZTEXsLYXu7OMH91iykcx-We6WoMKyHL_EYDCkN23RU9hO6FZTTIGpfjvqXBw0tQI-EpFXxxMNjfhrU/)no-repeat left center;
color: #fff; /* Color de los títulos */
text-decoration: none;
display: block;
}
h2.togglemenu a:hover {color: #ccc;} /* Color del título al pasar el cursor */
h2.active {background-position: left bottom;}
.toggle_container {
margin: 0 0 5px;
padding: 0;
border: 1px solid #d6d6d6;
background: #f0f0f0; /* Color del contenedor */
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
overflow: hidden;
font-size: 1.2em;
width: 380px; /* Ancho del contenedor */
clear: both;
}
.toggle_container .block {
padding: 20px;
}

Y por ?ltimo en Dise?o | Elementos de la p?gina | A?adir gadget | HTML/Javascript agrega esto:

<h2 class="togglemenu">
<a href="#">Pestaña 1</a></h2>
<div class="toggle_container">
<!-- Aquí va el contenido -->
<!-- Aquí va el contenido -->
</div>
</div>


<h2 class="togglemenu">
<a href="#">Pestaña 2</a></h2>
<div class="toggle_container">
<div class="block">
<!-- Aquí va el contenido -->
</div>
</div>


<h2 class="togglemenu">
<a href="#">Pestaña 3</a></h2>
<div class="toggle_container">
<div class="block">
<!-- Aquí va el contenido -->
</div>
</div>

Ya s?lo agrega el contenido que pondr?s en tu men? donde se indica en color rojo. Todo lo que agregues ah? es lo que estar? oculto y que se mostrar? al expandir el men?.
En color verde est?n las ?reas que podemos personalizar. En el caso del color de fondo de las pesta?as se cambian en esta parte:

background-image: -moz-linear-gradient(#AAAAAA, #000000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#AAAAAA), to(#000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AAAAAA,endColorStr=#000000);"

Es un color de fondo gradiente, el #AAAAAA es el color de arriba y el #000000 es el color de abajo.

Si quisieras agregar otra pesta?a s?lo a?ade otro c?digo como este:

<h2 class="togglemenu">
<a href="#">Pestaña 4</a></h2>
<div class="toggle_container">
<div class="block">
<!-- Aquí va el contenido -->
</div>
</div>

Y as? de sencillo podemos tener un men? simple, elegante y en el cual podremos meter todo aquello que queramos tener m?s organizado.