16 enero 2013

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>

24 comentarios

Gran aporte, genial como siempre socio!

Un saludo!

Muy buen consejo. Seguro que mucha gente lo colocará en su web.
Saludos.

Muy interesante. Saludos!

Ya están en marcha la II Edición de los Premios BlogBruno_1. Apúntate! http://elblogdebruno1.blogspot.com

BUENOS DIAS AMIGO LA VERDAD MUY BUENO TU MENU LO UNICO QUE NO SE CAMBIARLO DE COLOR EN VEZ DE ROJO NEGRO POR EJEMPLO MI CORREO ES josepedrogarcia93@hotmail.es gracias

Cambia #a90329; por #000; y listo.

Hola Antonio,
Me gusta mucho este menú desplegable y me gustaría ponerlo en mi blog, y lo que te quería preguntar es la posibilidad de que cuando lo despliegues no vaya directamente a las entradas, sino a unos títulos genéricos, y de estos títulos, a la url. Por si no me he explicado bien, te lo muestro con ejemplos. Mi blog se basa en decoración de casas, apartamentos, etc. En la parte visible del desplegable, estarían casas, apartamentos, etc., y al desplegarlo me gustaría que salieran los subtítulos antes de las url, es decir: casas en América, casas en Asia, etc. ¿Podría hacerlo?
Bueno, perdona todo el rollo que he escrito y espero tu respuesta.
Grácias,

MAR CELIS
oasisingular@gmail.com

Perfectamente lo puedes integrar pero las url deben ir buscando las etiquetas.
1.- Ejemplo:Casas del Mundo (se despliega y nos muestra: casas de américa, casas de europa etc.. y cada url nos redirige a la etiqueta específica.
2.- Ejemplo: Casas de Europa- url=http://oasisingular.blogspot.com.es/search/label/casas%20de%20europa

Debes especificar y ordenar todas las etiquetas.

No sé si me habré explicado bien.

Hola Antonio,

He puesto el menú en mi blog, quiero poner más submenús pero el caso es que solo me deja poner 3, podría añadir más de 3? gracias

perdona mi correo es: compartoy@gmail.com

Rebeca, el menú está dispuesto para colocar aproximadamente de 4 a 5 enlaces en el, si quieres mostrar más enlaces deberías aumentar el alto de cada categoría y ello se consigue en este trozo de código: .menu-item:hover ul {height: 125px;} ve aumentando el alto, en lugar de 125 coloca por ejemplo 160, y observa como te va quedando.

Saludos y gracias por comentar.

Ola amigo, al principio se nota que es un increible menu, bastante original, pero a mi respecto tiene un fallo bastante importante, y es que solo te deja agregar 4 submenus, claro, como tu has dicho esto se puede ampliar agregando mas cantidad al valor .menu-item:hover ul; pero entonces todas las celdas del menú quedarian del mismo tamaño y se ve feo, por ejmplo, agregas el valor a 325 para que te quepan 8 submenus, pero el otro menu solo tiene 3 submenus, entonces quedaria un espacio muy grande para llegar hasta el siguiente menu, no se si me dare a entender.
De todas formas, nosotros hemos corregido o por lo menos suprimido este error para que pusieses los menus que pusieses siempre quedara bien y de un tamaño diferente cada uno, podras ver que es verdad en nuestra web:
http://clicdescargas.jimdo.com/descargas/
Gracias por el menu, nos ha servido de mucho.

Gracias por tus tutoriales y aportes que de verdad los encuentro fásiles. Especialmente al editar el aspecto del menú, que por cierto, este era el más sencillo que encontre y que me funciono bien, me quedo super lindo en mi Blog >w< !!! ~(*u*)~ Gracias!!! mil besos, saludos.

Saludos esta genial tu menu pero si kiero un color amarillo en vez de rojo ke le debo cambiar . De ante mano graxia spor la ayuda

Hola, excelente tu menú, quiero incorporarlo a mi sitio web, pero quisiera que cuando se despliega cada menú, pueda insertar diferente cantidad de vinculos (submenú).
Agradeceria si puedes ayudarme.

Libro viejo, habría que modificar bastantes cosas del menú y ahora que digamos no tengo bastante tiempo para ello.

Hola gracias por tu respuesta.

Mira lo que tengo hecho y cuando puedas o tengas un ratito de tiempo si me puedes ayudar te lo voy a agradecer.

Saludos
te mando la pagina que estoy haciendo http://www.libreriausados.com.ar/Marcos/marcoprueba.php

Hola, pienso lo mismo, estaria bien hacer alguno cambios para mejorarlo. Es posible descargar tu version? Mil gracias.

amigo tienes la entrada antes de head para poderlo poner en mi pagina de jimdo

amigo tienes la entrada antes de head para poderlo poner en mi pagina de jimdo

Leonardo no entiendo que me quieres decir.

amigo tu menú es muy fácil de instalar y todo me esta quedando super, pero tengo un problema, no se como instalarlo y que el menú me quede a un costado de la pagina ya que siempre me queda en el centro, encima de un banner que tengo de fotos rotativas.

Aleja deja la url de tu blog y miro donde se produce el fallo.

hola me podrias decir como pusiste el menu que usas que es deslizante

Ray, no se a que menú te refieres.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"