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

428 descargas	1309 descargas

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/AVvXsEiuXobNpqmanQH6xaWcMtxDNbYHks67VVpBSTz4HdPlqj3zsjGf9CCQKf3d6W_KpSeROEGQu3unE8KWzp00I0jrxEga61BLaXZse_3nUL2toajOTejwwKY0wpa1cJfs0j2zhwLQIU0uwBld/)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.