Menu Vertical Desplegable

Aqui te traigo un sencillo menú que utilicé en el diseño de mi blog, es muy fácil de usar, solo usa tu creatividad

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> pegamos los estilos:


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/AVvXsEh5HKyfN-XrNk9qkF2bat1Dtp15W1nO-C6OkgWoAIzhjyxSA9AYHR7n9coeO_8Jop8lJ71U5g_Q1J4A6ABB-t6yRMcEGkOquGefjCYydK-KfqGiY_0GXtrsDtH9D500DSbXQl5mNVyJsYq6/)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 Finalmente colocamos el HTML en un gadget:


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


Puedes poner el numero de pestañas que quieras

Créditos: Ciudad Blogger