Lo que veremos hoy será el esqueleto o código básico que se necesita para hacer un menú tipo dropdown, o dicho en cristiano común, un menú cuyos elementos despliegan sus diferentes opciones en vertical hacia abajo cuando se hace hover sobre ellos.
El objeto de contar con este código es poder construir posteriormente cualquier otro con esta misma estructura aplicando sólo variaciones de estilo en el lugar adecuado.
Como esto no tiene demasiado ciencia, vamos a hacer válido un antiguo dicho callándonos a partir de aquí. Y es que un código vale más que mil palabras y mucho más si está comentado.
Primero la demo, posteriormente el HTML para construir la lista y por último el CSS necesario.
<ul id="menudrop"> <li><a href="javascript:void();">Inicio</a></li> <li><a href="javascript:void();">Trabajos</a> <ul> <li><a href="javascript:void();">Óleo</a></li> <li><a href="javascript:void();">Acuarela</a></li> <li><a href="javascript:void();">Acrílico</a></li> <li><a href="javascript:void();">Impresión digital</a></li> </ul> </li> <li><a href="javascript:void();">Autor</a> <ul> <li><a href="javascript:void();">Bio</a></li> <li><a href="javascript:void();">Exposiciones</a></li> </ul> </li> <li><a href="javascript:void();">Contacto</a> <ul> <li><a href="javascript:void();">Correo</a></li> <li><a href="javascript:void();">Dirección</a></li> <li><a href="javascript:void();">Redes sociales</a></li> </ul> </li> </ul>
#menudrop, #menudrop ul, #menudrop ul li,
#menudrop ul li ul, #menudrop ul li ul li {
margin:0;
padding:0;
}
#menudrop{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
/* Forzar superposición del menú
position:relative;
z-index:5;
Quitar el comentario si se necesita
*/
}
#menudrop li{
float:left;
margin-right:10px;
position:relative;
}
#menudrop a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#menudrop a:hover{
color:#fff;
background:#246F49;
text-decoration:underline;
}
#menudrop ul{
/* Color de fondo de la web -para IE- */
background:white;
/* Idem transparente para navegadores que lo soporten */
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px; /* Escondemos inicialmente los submenús */
}
#menudrop ul li{
padding-top:1px; /* Separación vertical entre elementos */
float:none;
}
#menudrop ul a{
white-space:nowrap; /* Separa los elementos en diferentes líneas */
}
#menudrop li:hover ul{
left:0; /* Submenús visibles */
}
/* Para que cuando se mueva el cursor por los elementos del submenú los elementos permanecen visibles */
#menudrop li:hover a{
background:#246F49; /* Aprovechamos para cambiar de color los señalados */
text-decoration:underline;
}
#menudrop li:hover ul a{
text-decoration:none;
}
#menudrop li:hover ul li a:hover{
background:#333;
}
#menudrop ul li ul, #menudrop ul li ul li {
margin:0;
padding:0;
}
#menudrop{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
/* Forzar superposición del menú
position:relative;
z-index:5;
Quitar el comentario si se necesita
*/
}
#menudrop li{
float:left;
margin-right:10px;
position:relative;
}
#menudrop a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#menudrop a:hover{
color:#fff;
background:#246F49;
text-decoration:underline;
}
#menudrop ul{
/* Color de fondo de la web -para IE- */
background:white;
/* Idem transparente para navegadores que lo soporten */
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px; /* Escondemos inicialmente los submenús */
}
#menudrop ul li{
padding-top:1px; /* Separación vertical entre elementos */
float:none;
}
#menudrop ul a{
white-space:nowrap; /* Separa los elementos en diferentes líneas */
}
#menudrop li:hover ul{
left:0; /* Submenús visibles */
}
/* Para que cuando se mueva el cursor por los elementos del submenú los elementos permanecen visibles */
#menudrop li:hover a{
background:#246F49; /* Aprovechamos para cambiar de color los señalados */
text-decoration:underline;
}
#menudrop li:hover ul a{
text-decoration:none;
}
#menudrop li:hover ul li a:hover{
background:#333;
}
Cambiando algunas propiedades y añadiendo transiciones, podemos obtener algunas variantes:
#menudrop li:hover ul{
left:0; /* Submenús visibles */
-webkit-transition:all .3s ease;
-o-transition:all .3s ease;
-moz-transition:all .3s ease;
-ms-transition:all .3s ease;
transition:all .3s ease;
}
left:0; /* Submenús visibles */
-webkit-transition:all .3s ease;
-o-transition:all .3s ease;
-moz-transition:all .3s ease;
-ms-transition:all .3s ease;
transition:all .3s ease;
}
O bien:
#menudrop ul{
/* Color de fondo de la web -para IE- */
background:white;
/* Idem transparente para navegadores que lo soporten */
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:0; /* NO Escondemos inicialmente los submenús */
opacity:0; /* Lo hacemos con opacity */
}
#menudrop li:hover ul{
left:0; /* Submenús visibles */
opacity:1;
-webkit-transition:all .6s ease;
-o-transition:all .6s ease;
-moz-transition:all .6s ease;
-ms-transition:all .6s ease;
transition:all .6s ease;
}
/* Color de fondo de la web -para IE- */
background:white;
/* Idem transparente para navegadores que lo soporten */
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:0; /* NO Escondemos inicialmente los submenús */
opacity:0; /* Lo hacemos con opacity */
}
#menudrop li:hover ul{
left:0; /* Submenús visibles */
opacity:1;
-webkit-transition:all .6s ease;
-o-transition:all .6s ease;
-moz-transition:all .6s ease;
-ms-transition:all .6s ease;
transition:all .6s ease;
}
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
soy fatal para estas cosas, pero, podrías decir por favor donde hay que situar de la plantilla el html y el css?
ResponderEliminargracias!
Sí, claro. Pero no sólo para este caso, sino para todos:
EliminarBlogger para torpes: CSS y HTML
Hola Oloman,
ResponderEliminarNo sé si será que siempre ha sido así pero parece que me he dado cuenta hoy. Las etiquetas se me ordenan por orden alfabético y no por el que yo les doy por lo que el código de los breadcrumbs que me ayudaste a modificar hace tiempo para que mostrase varias etiquetas y así simular que hay distintos contenedores como categorías no dará ese efecto.
¿Sabes si se puede cambiar la forma de ordenarlas o son códigos "intocables" de blogger.
Lo cierto es que tengo la sensación de que antes si se podían ordenar...
Gracias
No lo sé seguro pero yo creo que las etiquetas sólo se pueden ordenar precisamente en el gadget de etiquetas.
EliminarY tampoco había caído en que en los posts se muestran en ese orden, sobre todo porque nunca había tenido importancia para mí. Por lo que recuerdo de esa parte de código que genera las etiquetas, se trata de un bucle (loop) que va leyendo los datos desde la base de idem de Blogger y no creo que se pueda cambiar el orden... al menos fácilmente.
Quizás mediante JavaScript se podrían cambiar una vez leídos para mostrarlos en otro orden pero, personalmente, no creo que merezca la pena.
Es que siempre las he ordenado a modo de categorías con contenedores, tipo: Adobe Photoshop, Pinceles.
EliminarEl caso es que al verlas todas desordenadas vi que ahora estaban de forma alfabética. En fin, tendré que quitar los breadcrumbs y "apañarme" con unas falsas categorías mediante un menú raro jeje.
Gracias
Hola Oloman,
ResponderEliminarHe recurrido a ti, ya que eres una referencia en el mundo del blog.
Acudo a ti porque me encanta bloggerar y escribir para mis seguidores, pero tengo un problema, no estoy conforme con los diseños actuales que hay en Blogger. Quisiera encontrar algo que cumpla mis espectativas.
Y por eso he acudido a ti, quiero que me recomiendes alguna página en la que pueda comprar plantillas de calidad (no importa el precio) para poder así, comenzar con mi blog en Blogger.
Por favor, ¡AYÚDAME!
El que mejor te puede ayudar en eso es Google. Sólo pon Template Blogger y opcionalmente Premium y seguro que te salen multitud de sitios con plantillas. Yo sólo he comentado alguna que otra vez sobre plantillas que me he encontrado casualmente y que me han gustado por algo especial.
EliminarSi tienes problemas técnicos o quieres algo totalmente personalizado, echa un vistazo al banner que ayer puse en la parte superior derecha (Low Cost).
Muchas Gracias Oloman.
ResponderEliminarMe ha servido de mucho tu gran ayuda.
Lo de "gran" es cuestionable, pero gracias :)
Eliminarno se como enlazar cada # link me puede decir como!
ResponderEliminarLos enlaces van entre las comillas de href. En el ejemplo puse en todos los casos la leyenda "javascript:void();", pero es sólo un enlace vacío. Tú deberás poner ahí la URL de destino.
EliminarMe encanta cuando se juegan con las transiciones, hasta me siento como niño chiquito jugando con el hover una y otra vez :)
ResponderEliminarNo eres el único Potro. A mí me pasa lo mismo #yoconfieso :)
EliminarJo, gracias a tus post voy a poder hacer cosas que no contaba salvo....metiendo otras millones de horas más.
ResponderEliminarGracias de verdad!!!Sigue con estos posts...que otros seguiremos con los nuestros gracias a ti!!! :P
Lo intentaremos ;)
EliminarOloman yo tengo un problema, hago todos los pasos y los submenus se me abren debajo de la entradas ¿que puedo acer
ResponderEliminarEn el propio código se daba la pista. Habría que poner un z-index. Fíjate en esto:
Eliminar/* Forzar superposición del menú
position:relative;
z-index:5;
Quitar el comentario si se necesita
*/
Si quitas todo el comentario y los símbolos */ y /*, te quedará un position y un z-index que se interpretarán y podrán solucionar lo que dices.
hola una pregunta a ver si me puede ayudar como tendria que hacer para que en la opcion aloe aparezca al darle clip otro submenu
ResponderEliminar¿Podrías repetir la pregunta pero de otra manera? No entiendo qué quieres decir.
EliminarHola ¿que estoy haciendo mal si el menú desplegable se abre debajo de las entradas?
ResponderEliminarGracias!
Echa un vistazo al comentario 8.1 ;)
EliminarHola. Eso que quieres es muy fácil, pero hay que ponerlo correctamente. Aquí lo tienes. Y el no follow es igual pero sería rel="nofollow".
ResponderEliminarHOla Oloman. En primer lugar, muchísimas gracias por compartir. No sé qué debo estar haciendo mal que no se me abren los submenús ni debajo de la entrada ni en ningún sitio.
ResponderEliminarPero ¿dónde lo has puesto? No lo veo...
Eliminarhttp://miss-cupcake-blog.blogspot.com.es/
EliminarVale. Ahí miré pero no sabía en qué parte del blog lo habías puesto. De todas formas parece que ya lo solucionaste.
EliminarHola Oloman, tengo el mismo problema que el comentario anterior. El menú sale correctamente pero no se me abren los submenús ni debajo de la entrada ni en otro sitio. Como lo puedo solucionar? Gracias!
ResponderEliminarblog: http://udepbe.blogspot.com.es/
Si es el que tienes ahora se me ocurren dos motivos:
Eliminar1. Que no tienes ningún submenú creado con una lista metida dentro de otra
2. Que el que tienes no es este que explico yo ;)
Hola
ResponderEliminarComo puedo ajustar el menu a la izquierda?, que empiece justo en la esquina izquierda. justo donde comienza la cabecera
http://res873b.blogspot.com.es/
Gracias
No sé. No puedo ver ese blog. Dice que lo has eliminado...
Eliminardisculpame! es que estaba testeando
ResponderEliminarhttp://res873a.blogspot.com.es/
Quitando márgenes y padding. Incluye esto en tu CSS:
Eliminar.tabs-inner {
padding: 0;
}
#crosscol {
margin: 0;
}
Muchas Gracias!
ResponderEliminarOloman tienes idea de como le puedo colocar un submenu a un submenu?
ResponderEliminarPor ejemplo de "Trabajos" sale "acuarela", "oleo", etc, pero quiero que ademas tambien salga desde "oleo" mas opciones.
Sí, claro. El problema está en darles estilo.
EliminarPara meter un segundo submenú dentro de un primero, simplemente hay que añadir otra lista completa (ul-li-li-li-/ul) dentro de cualquier elemento li. La cosa es que después en el CSS tienes que generar el estilo de esos submenús anidados usando selectores como #menudrop ul li ul li ul li {...}
Genial, pero ni idea de como hacer lo de CSS
EliminarMe preguntaste si tenía idea y eso si que tengo. Te expliqué dicha idea pero si no sabes CSS te va a resultar imposible desarrollarla.
EliminarHola, me gustaría saber como se podría cambiar el tipo de letra del menú, no lo encuentro en el css :(
ResponderEliminarSi te refieres a este sería añadiendo un FONT-FAMILY en el selector #MENUDROP UL.
EliminarY si es a otro, pues habría que ver que selector usa el menú y hacer lo mismo.
Hola, no consigo que el menú desplegado salga justo debajo del principal, me sale a un centímetro a la derecha de donde debería. que hago? Gracias
ResponderEliminarEso debe ser porque tienes alguna regla CSS para listas que interfiere con este código. Si me pasas un enlace de dónde lo tienes montado, quizás pueda ver qué es.
EliminarEl link es este: http://rtshgfsrdtghtr.blogspot.com.es/
EliminarTiene este nombre y un diseño pobre porqué antes de poner nombre quiero empezar a diseñarlo y dejarlo como quiero. A ver si ves algun error.
Muchas gracias por tu tiempo
Hay otro CSS que te inferfiere y mete un padding que no pinta nada. La forma más sencilla de arreglar eso es anularlo añadiendo un padding-left:0 aquí:
Eliminar#menudrop li:hover ul {
left: 0;
padding-left: 0;
}
He puesto esto y sigue igual. Y si borro el CSS que dices que no pinta nada?
EliminarEs que no sé cual es, pero si es así añádele un !important y seguro que te irá bien:
Eliminarpadding-left: 0 !important;
ya está, muchas gracias por todo!
EliminarTengo un problema y es que al poner el raton sobre la pestaña desplegable se abren los submenus que tiene anidados pero al ir a pinchar con el raton desaparecen. ¿Que puedo hacer para solucionar esto?
ResponderEliminarUn saludo
Ese menú que tienes no es el que indico aquí, pero he visto que tiene un fallo. Has de repasar el CSS y cambiar el valor del tercer padding aquí:
ResponderEliminar#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
color: #000000;
display: block;
font:normal 16px walter turncoat; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbwnav li a:hover, #mbwnav li a:active {
background: #f1d572;
color: #000000;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
Esos 10px tienen que ser 4px. Así no quedará el hueco que hace que desaparezca el efecto hover. Ojo que detrás de ese código tienes otros dos selectores similares con padding idéntico. Esos últimos no los toques.
Muchas gracias, ya funciona ;-) (creo xD)
ResponderEliminarolomaaaan!! S.O.S. je
ResponderEliminarno me sale :( cualquier cosa, mira http://angapyhyrenda.blogspot.com.ar/
probe de todas formas y no hay caso.. dame una mano por favor
muchas gracias!!
Lo veo... veo tu enlace gratuito a un blog sin nada y también los mensajes de "agradecimiento" que me dejas aunque luego los borres.
EliminarAh y sobre la cuestión principal, sólo has de copiar y pegar lo que detallo en el blog y luego cambiar los nombres de botones y los enlaces por los tuyos.
Necesito ayuda, he probado con mil formas para crear un menú despegable pero no lo consigo, me puedes dar un vistazo?
ResponderEliminarhttp://elnoticierodemontse.blogspot.com.es/
Gracias
¿Por qué no pruebas directamente con el código de este post que está comprobado y a la vista que funciona bien? Luego sólo cambia los colores y ya lo adaptas a la estética de tu sitio
EliminarNo hay forma, no se donde me estoy equivocando... me puedes dar una mano?
ResponderEliminarA ver Montse, sólo tienes que hacer lo siguiente:
Eliminar1. Desde "Diseño", crear un nuevo gadget HTML/JavaScript en la parte superior del blog y en él pegar el código del primer cuadro de esta entrada
2. Editar plantilla buscar el cierre SKIN (entre las etiquetas SKIN va todo el CSS) y justo antes de ese cierre, pegar el código del segundo cuadro.
Guardas, miras tu sitio y seguro que te sale un desplegable operativo.
Si es así, luego sólo tienes que ir al gadget que creaste, editarlo y cambiar los nombres de los enlaces, así como la direcciones (lo que parece dentro del href y que yo en ejemplo puse como javascript:void(0);)
Y siguiendo el camino luego puedes ir al CSS de la plantilla y cambiar los valores de colores que gustes.
No puedo explicarte ya con más detalle. Suerte.
queda asi y copie ( creo exactamente como esta aqui ), donde esta mi error ?
ResponderEliminarhttp://i.imgur.com/0dgqGtI.png
Si no veo el código en el blog, casi imposible adivinarlo y ahora está privado...
EliminarOtros blogger por lo general tardan 1 mes o mas en contestarme, por lo menos los ultimos 3 que intente preguntarles algo xd ( que tienes abajo en referencias ), y estaba recibiendo visitas de otros paises y aun no quiero dar a conocer mi blog, pero bueno, ahi esta otra ves.
ResponderEliminarAquí te falta una llave de cierre y por eso no te funciona el estilo de ahí en adelante.
ResponderEliminardiv.widget-content div span {
color: #e0e0e0 !important;
font-size: 10px !important;
font-family: Helvetica !important;
letter-spacing: 0 !important;
/*AQUI DEBER IR UN CIERRE COMO EL SIGUIENTE */ }
#menudrop, #menudrop ul, #menudrop ul li,
#menudrop ul li ul, #menudrop ul li ul li {
margin:0;
padding:0;
}
Se conoce que al pegar el código que cargaste la que había.
Hola Oloman! Genial tu tutorial. el problema es que me pasa como en la pregunta 8 y no se muy bien qué pegar ni dónde para que se vean las pestañas. Puedes echarme una mano?
ResponderEliminarhttp://ondaverderadiocomunitaria.blogspot.com
Gracias!
Hola. El primer cuadro es HTML y debes pegarlo en un gadget tipo HTML/JavaScript. El segundo es CSS y eso hay que ponerlo en tu plantilla (editándola), pegándolo entre las dos etiquetas SKIN que encontrarás en ella.
EliminarMás info en este enlace.
Buenas noches:
ResponderEliminarLlevo 3 días intentando poner el menú desplegable el mi plantilla y no hay forma. He seguido todos los pasos, tambien las indicaciones que diste en la respuesta 25 y 29.1 y no hay manera. ¿En qué me estoy equivocando? Entiendo poco de CSS, así que espero que me sea difícil seguirte. Muchas gracias.
Ah! no sé cómo puedo ponerte el blog para que entres en sus entrañas.
PD: ahora mismo el CSS está pegado en Plantilla "personalizado"
Perdona, no te he puesto mi blog
Eliminarhttp://unpocodeconomia.blogspot.com.es/
Hola Im Romgra
EliminarLa forma de hacer lo del menú desplegable está explicado omitiendo lo más básico, ya que la mayoría conocen eso y este post no es de los de BTP.
Explicado brevemente, lo que tienes que hacer es poner lo que se indica que es HTML en un nuevo gadget de los del tipo HTML/JavaScript.
El CSS hay que añadirlo... en la parte CSS, bien en la plantilla, bien desde el Diseñador de Plantillas.
Con esas dos cosas ya te debería funcionar y después sólo es cuestión de cambiar en la parte HTML los enlaces y textos que yo puse de ejemplo por los que tú desees.
Para más info sobre "lo básico", echa un vistazo a esta entradas.
Muchas gracias por contestar tan rápido. Una pregunta, ¿El html lo pego en el body al principio del que está en mi plantilla o antes del final o sustituyo todo el head por este?
EliminarMil gracias de nuevo!
¿Yo dije algo de eso? Dije que pusieras el HTML en un nuevo gadget tipo HTML/JavaScript
EliminarHola,
ResponderEliminarYo también soy algo torpe con estas cosas... Sigo las instrucciones pero al poner el Gadget en el apartado de multicolumnas o en el crosscolum-2 no se me despliega! No entiendo por qué... la verdad es que es muy frustrante.
https://angelsinocencio.blogspot.com.es/
¡Lo tengo puesto en el footer-1, porque ahí si que se despliega! ¿Podrías ayudarme? ¡Gracias!
Hola Ángel. Pues lo he visto y en pie de página tampoco te funciona, pero el motivo es sencillo de solucionar: te falta el código CSS que es precisamente el que hace la "magia".
EliminarAquí tienes una guía para saber dónde se puede poner el CSS en Blogger.