√ Menú vertical desplegable

En esta ocasión os traigo un menú de navegación vertical. Es una buena forma de ocultar una gran cantidad de enlaces en un espacio reducido y las animaciones le darán un toque sencillo y elegante a vuestro blog. Incluso si no tenéis mucha práctica en Html, seréis capaces de sacar esto adelante.

Como podéis ver un poco más abajo en la demo, las secciones se despliegan de forma predeterminada al colocar el ratón sobre ellas. La sección principal permanece siempre abierta, para incluir un mensaje de bienvenida.

Está adaptado al Sevillismo pero podéis cambiarlo a vuestro antojo, tan solo cambiando los títulos y url.
Ahora que tenemos una idea de como funciona, vamos a empezar!

Para añadir este menú, siga los siguientes pasos:

1.Vaya a Escritorio de Blogger> Diseño
2. Añadir un widget de HTML / Javascript y pegar el código siguiente:

<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
nav {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.5;
margin: 50px auto; /*for display only*/
width: 200px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.menu-item {
background: #fff;
width: 200px;
}
/*Menu Header Styles 1*/
.menu-item h4 {
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #a90329;
}
.menu-item h4 a {
color: white;
display: block;
text-decoration: none;
width: 200px;
}
/*Menu Header Styles 2*/
.menu-item h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
background: #cc002c; /* Old browsers */
background: -moz-linear-gradient(top, #cc002c 0%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #cc002c 0%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.alpha p {
font-size: 13px;
padding: 8px 12px;
color: #aaa;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
list-style-type: none;
overflow: hidden;
padding: 0px;
}
.menu-item ul a {
margin-left: 20px;
text-decoration: none;
color: #aaa;
display: block;
width: 200px;
}
/*li Styles*/
.menu-item li {
border-bottom: 1px solid #eee;
}
.menu-item li:hover {
background: #eee;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px; /*Collapses the menu*/
list-style-type: none;
overflow: hidden;
padding: 0px;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item:hover ul {
height: 125px;
}
</style>
<nav>
<div class="menu-item alpha">
<h4><a href="http://www.amorsevillista.com/">Inicio</a></h4>
<p>Pequeña descripción ....</p>
</div>
<div class="menu-item">
<h4>Sevilla F.C.</h4>
<ul>
<li><a href="#">Plantilla</a></li>
<li><a href="#">Clasificación</a></li>
<li><a href="#">Resultados</a></li>
<li><a href="#">Calendario</a></li>
</ul>
</div>
<div class="menu-item">
<h4>Sevilla Atltco.</h4>
<ul>
<li><a href="#">Plantilla</a></li>
<li><a href="#">Clasificación</a></li>
<li><a href="#">Resultados</a></li>
<li><a href="#">Calendario</a></li>
</ul>
</div>
<div class="menu-item">
<h4>S.F.C. Medios</h4>
<ul>
<li><a href="#">T.V.</a></li>
<li><a href="#">Radio</a></li>
</ul>
</div>
<div class="menu-item">
<h4>!Síguenos!</h4>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google +</a></li>
<li><a href="#">RSS</a></li>
</ul>
</div>
<div class="menu-item">
<h4>Contacto</h4>
<ul>
<li><a href="#">Email</a></li>
</ul>
</div>
</nav>

3. Guardar y llévelo a la sidebar.

Si quieres comprobar el resultado, copia el código de arriba y pégalo en esta página

Para agregar más secciones al Menú, justo debajo de algún </div> agrega el siguiente código:

<div class="menu-item">
<h4> <a href=" "> link-here menú de título </ a> </ h4>
<ul>
<li> <a href=" "> link-here sub-menu-título </ a> </ li>
<li> <a href=" "> link-here sub-menu-título </ a> </ li>
<li> <a href=" "> link-here sub-menu-título </ a> </ li>
</ Ul>
</ Div>