Menú horizontal desplegable (dropdown). Código básico | Oloblogger Pues el título es autoexplicativo. Lo que veremos hoy será el esqueleto o código básico que se nec...

6 de agosto de 2012

Menú horizontal desplegable (dropdown). Código básico

Pues el título es autoexplicativo.

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


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;

}



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;

}

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

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

69 comentarios :

  1. soy fatal para estas cosas, pero, podrías decir por favor donde hay que situar de la plantilla el html y el css?


    gracias!

    ResponderEliminar
    Respuestas
    1. Sí, claro. Pero no sólo para este caso, sino para todos:

      Blogger para torpes: CSS y HTML

      Eliminar
  2. Hola Oloman,

    No 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

    ResponderEliminar
    Respuestas
    1. No lo sé seguro pero yo creo que las etiquetas sólo se pueden ordenar precisamente en el gadget de etiquetas.

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

      Eliminar
    2. Es que siempre las he ordenado a modo de categorías con contenedores, tipo: Adobe Photoshop, Pinceles.

      El 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

      Eliminar
  3. Hola Oloman,

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

    ResponderEliminar
    Respuestas
    1. 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.

      Si tienes problemas técnicos o quieres algo totalmente personalizado, echa un vistazo al banner que ayer puse en la parte superior derecha (Low Cost).

      Eliminar
  4. Muchas Gracias Oloman.
    Me ha servido de mucho tu gran ayuda.

    ResponderEliminar
    Respuestas
    1. Lo de "gran" es cuestionable, pero gracias :)

      Eliminar
  5. no se como enlazar cada # link me puede decir como!

    ResponderEliminar
    Respuestas
    1. Los 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.

      Eliminar
  6. Me encanta cuando se juegan con las transiciones, hasta me siento como niño chiquito jugando con el hover una y otra vez :)

    ResponderEliminar
    Respuestas
    1. No eres el único Potro. A mí me pasa lo mismo #yoconfieso :)

      Eliminar
  7. Jo, gracias a tus post voy a poder hacer cosas que no contaba salvo....metiendo otras millones de horas más.
    Gracias de verdad!!!Sigue con estos posts...que otros seguiremos con los nuestros gracias a ti!!! :P

    ResponderEliminar
  8. Oloman yo tengo un problema, hago todos los pasos y los submenus se me abren debajo de la entradas ¿que puedo acer

    ResponderEliminar
    Respuestas
    1. En el propio código se daba la pista. Habría que poner un z-index. Fíjate en esto:
      /* 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.

      Eliminar
  9. 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
    Respuestas
    1. ¿Podrías repetir la pregunta pero de otra manera? No entiendo qué quieres decir.

      Eliminar
  10. Hola ¿que estoy haciendo mal si el menú desplegable se abre debajo de las entradas?
    Gracias!

    ResponderEliminar
    Respuestas
    1. Echa un vistazo al comentario 8.1 ;)

      Eliminar
  11. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Hola. 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".

      Eliminar
  12. HOla 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.

    ResponderEliminar
    Respuestas
    1. Pero ¿dónde lo has puesto? No lo veo...

      Eliminar
    2. http://miss-cupcake-blog.blogspot.com.es/

      Eliminar
    3. Vale. Ahí miré pero no sabía en qué parte del blog lo habías puesto. De todas formas parece que ya lo solucionaste.

      Eliminar
  13. Hola 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!

    blog: http://udepbe.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Si es el que tienes ahora se me ocurren dos motivos:
      1. 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 ;)

      Eliminar
  14. Hola

    Como 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

    ResponderEliminar
    Respuestas
    1. No sé. No puedo ver ese blog. Dice que lo has eliminado...

      Eliminar
  15. disculpame! es que estaba testeando

    http://res873a.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Quitando márgenes y padding. Incluye esto en tu CSS:
      .tabs-inner {
      padding: 0;
      }
      #crosscol {
      margin: 0;
      }

      Eliminar
  16. Oloman tienes idea de como le puedo colocar un submenu a un submenu?
    Por ejemplo de "Trabajos" sale "acuarela", "oleo", etc, pero quiero que ademas tambien salga desde "oleo" mas opciones.

    ResponderEliminar
    Respuestas
    1. Sí, claro. El problema está en darles estilo.

      Para 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 {...}

      Eliminar
    2. Genial, pero ni idea de como hacer lo de CSS

      Eliminar
    3. Me 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.

      Eliminar
  17. Hola, me gustaría saber como se podría cambiar el tipo de letra del menú, no lo encuentro en el css :(

    ResponderEliminar
    Respuestas
    1. Si te refieres a este sería añadiendo un FONT-FAMILY en el selector #MENUDROP UL.
      Y si es a otro, pues habría que ver que selector usa el menú y hacer lo mismo.

      Eliminar
  18. 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

    ResponderEliminar
    Respuestas
    1. Eso 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.

      Eliminar
    2. El link es este: http://rtshgfsrdtghtr.blogspot.com.es/

      Tiene 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

      Eliminar
    3. 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í:

      #menudrop li:hover ul {
      left: 0;
      padding-left: 0;
      }

      Eliminar
    4. He puesto esto y sigue igual. Y si borro el CSS que dices que no pinta nada?

      Eliminar
    5. Es que no sé cual es, pero si es así añádele un !important y seguro que te irá bien:
      padding-left: 0 !important;

      Eliminar
    6. ya está, muchas gracias por todo!

      Eliminar
  19. Tengo 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?

    Un saludo

    ResponderEliminar
  20. 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í:
    #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.

    ResponderEliminar
  21. Muchas gracias, ya funciona ;-) (creo xD)

    ResponderEliminar
  22. olomaaaan!! S.O.S. je
    no 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!!

    ResponderEliminar
    Respuestas
    1. 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.
      Ah 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.

      Eliminar
  23. Necesito ayuda, he probado con mil formas para crear un menú despegable pero no lo consigo, me puedes dar un vistazo?
    http://elnoticierodemontse.blogspot.com.es/
    Gracias

    ResponderEliminar
    Respuestas
    1. ¿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

      Eliminar
  24. No hay forma, no se donde me estoy equivocando... me puedes dar una mano?

    ResponderEliminar
    Respuestas
    1. A ver Montse, sólo tienes que hacer lo siguiente:
      1. 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.

      Eliminar
  25. queda asi y copie ( creo exactamente como esta aqui ), donde esta mi error ?

    http://i.imgur.com/0dgqGtI.png

    ResponderEliminar
    Respuestas
    1. Si no veo el código en el blog, casi imposible adivinarlo y ahora está privado...

      Eliminar
  26. Otros 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.

    ResponderEliminar
  27. Aquí te falta una llave de cierre y por eso no te funciona el estilo de ahí en adelante.

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

    ResponderEliminar
  28. 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?

    http://ondaverderadiocomunitaria.blogspot.com

    Gracias!

    ResponderEliminar
    Respuestas
    1. 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.
      Más info en este enlace.

      Eliminar
  29. Buenas noches:
    Llevo 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"

    ResponderEliminar
    Respuestas
    1. Perdona, no te he puesto mi blog
      http://unpocodeconomia.blogspot.com.es/

      Eliminar
    2. Hola Im Romgra
      La 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.

      Eliminar
    3. 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?
      Mil gracias de nuevo!

      Eliminar
    4. ¿Yo dije algo de eso? Dije que pusieras el HTML en un nuevo gadget tipo HTML/JavaScript

      Eliminar
  30. Hola,

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

    ResponderEliminar
    Respuestas
    1. 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".

      Aquí tienes una guía para saber dónde se puede poner el CSS en Blogger.

      Eliminar