Menú desplegable en horizontal ocupando todo el ancho | Oloblogger No sé cuántos tipos de menús distintos llevo ya publicados, pero es que siendo un elemento imprescin...

12 de noviembre de 2014

Menú desplegable en horizontal ocupando todo el ancho

No sé cuántos tipos de menús distintos llevo ya publicados, pero es que siendo un elemento imprescindible para la inmensa mayoría de sitios, las posibilidades de personalización son casi tantas como páginas disponibles para su instalación existen.

Este de hoy es un menú que puede incluir un segundo nivel o submenú en los elementos de la lista que se desee y que se desplegará al pasar el puntero por encima del item correspondiente. Su particularidad es que el despliegue será en horizontal, ocupando todo el ancho disponible y que se mostrará solapado por encima de cualquier otro contenido que pudiera existir por la zona dónde aparece.

Adicionalmente, ya que nos ponemos en faena, lo construiremos todo de manera que sirva tanto para diseños estáticos como adaptables (RWD).

Menú con despliegue total en horizontal



Lo fundamental en un menú es la relación de elementos y enlaces, cosa que haremos en esta ocasión de la manera más socorrida, es decir, mediante una lista. Para crear los submenús, simplemente anidamos una segunda lista ul dentro del elemento de lista li principal que pretendemos que sea desplegable.

Este es un ejemplo con un enlace directo (sin desplegable) y otro elemento que contendrá un submenú que al desplegarse mostrará tres enlaces. Sólo tendréis que replicar la estructura del primer li o del segundo para hacer respectivamente una cosa u otra.

<nav>
 <ul class="fullnav">
  <li>
   <a href="URL_DESTINO">ENLACE_DIRECTO</a>
  </li>
  <li>
   <a href="#">OPCIÓN_DESPLEGABLE</a>
   <ul>
    <li>
     <a href="URL_DESTINO">ENLACE_SUBMENÚ</a>
    </li>
    <li>
     <a href="URL_DESTINO">ENLACE_SUBMENÚ</a>
    </li>
    <li>
     <a href="URL_DESTINO">ENLACE_SUBMENÚ</a>
    </li>
   </ul>
  </li>
 </ul>
</nav>


Esto anterior es el HTML que así, sin estilo, formará sólo una simple lista con una sublista en el segundo elemento. Se puede incluir en un gadget o directamente en la plantilla (Blogger) si sustituís las comillas dobles (") por comillas simples (').



Una vez montada la lista llega el turno del CSS para que todo funcione como os prometía al principio.

El lugar dónde colocarlo sería en la hoja de estilo (.css) si la tenéis en archivo aparte o entre las etiquetas skin si lo insertáis en una plantilla Blogger. También se puede añadir desde el Diseñador de plantillas > Avanzado > Añadir CSS.

nav {position: relative; width: 100%; margin: 0 auto; font-family: Arial;}
ul.fullnav, ul.fullnav ul {list-style: none; width: 100%; margin: 0; padding: 0; border: 0; font-size: 0; text-align: center;}
ul.fullnav {border-top: 4px double #666; border-bottom: 4px solid #999; background: #bbb;}
ul.fullnav li {display: inline-block; margin: 0; padding: 0; font-size: 18px; line-height: 60px;}
ul.fullnav li a {display: block; padding: 0 10px; text-decoration: none; text-transform: uppercase; color: #333;}
ul.fullnav li ul {position: absolute; left: 0; width: 100%; height: 0; overflow: hidden; background: #999; line-height: 0; z-index: 3;}
ul.fullnav ul a {color: white;}
ul.fullnav li:hover a {background: #999;}
ul.fullnav li:hover ul {height: auto;}
ul.fullnav li:hover ul li a {background: transparent;}
ul.fullnav li:hover ul li a:hover {text-decoration: none; color: #333;}

Para los que busquen ir aprendiendo cosas, el sistema que he utilizado se basa en posicionar la sublista (ul.fullnav li ul) de manera absoluta con respecto al contenedor general (nav) para que aparezca debajo de los enlaces principales, dejándola además inicialmente oculta con height: 0 y overflow: hidden.

Al hacer hover sobre el elemento de lista cambiamos el valor de la altura para que esta sea automática (ul.fullnav li:hover ul {height: auto;}) y sólo con eso ya la tendremos visible. Todo lo demás es parafernalia estética que evidentemente podéis personalizar al gusto.



Y para terminar la demo, pero como vista así de manera aislada algunos no se harán una idea de cómo puede quedar en su sitio, en este Codepen podéis verlo integrado en una web simulada. Como siempre, allí podréis trastear lo que queráis para ver qué hace qué cosa y también para experimentar modificando lo que necesitéis.


¿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

42 comentarios :

  1. Andaba buscando algo así para mi próxima plantilla. Con unos pequeños cambios tienes mucho en muy poco espacio.

    Y no, no tardaré un siglo en acabarla ;) . De hecho, la tengo casi lista, sólo tenía cierto dolor de cabeza con el menú que tenía hecho, pero voy a intentar acoplar y adaptar esto a ver cómo queda.

    ResponderEliminar
  2. Pruebo el nuevo menú y funciona pero en la versión para móviles no aparece, en lugar de ello solo muestra la opción página principal por dos veces como puedes ver aquí http://i.imgur.com/OzoKoeg.png

    ResponderEliminar
    Respuestas
    1. Es que para usar este (y otros) gadgets en móviles, tendrías que prescindir de las plantillas de Blogger y usar una personalizada. De lo contrario no saldrán, tal y como te pasa.

      Eliminar
  3. ¡Hola Oloman! Muchísimas gracias por este artículo y tantos otros que a lo largo de mi vida bloguereña he estado leyendo entre las tinieblas jajaj ;)

    Estoy aplicando este menu en un blog de pruebas para ver si me gusta y quito los que tengo en el blog principal. EL link es el siguiente: http://goo.gl/V4akKB

    En lugar de que el ancho del SUBMENU sea el ANCHO del menu principal, sale la lista hacia abajo, en lugar de hacia el ancho (no me lo lleva al ancho de la pantalla tampoco y no sé por qué pero lo prefiero así). El menú tiene un submenu y un subsubmenu, pero igual, lo había probado en Codepen y me había funcionado.

    Yo creo que entre tanto modificarle el HTML a lo largo del tiempo, modifiqué algo más que no sé jajaja ;) Alguna pista de donde me pueda fijar? GRACIAS!!!

    ResponderEliminar
    Respuestas
    1. Hola Oloman! Me inquietaba el tema y encontré el problema, tenía una configuración de TABS para los menús que tengo en el blog principal y lo tendría que quitar para que funcione correctamente.

      Sé que estabas ayudando a una compi de MadTB con su blog ;) ¡Saludos!

      Eliminar
    2. Ah, estupendo, porque por eso que comentas y otras muchas cosas más, voy de cabeza y con mucho atraso contestándoos. Me alegro de que lo resolvieras por tus medios.

      Eliminar
  4. Vale.... ¡el menú que estuve buscando durante muchísimo tiempo! Miraré de usarlo en el próximo diseño :)

    Hablando de menús, encuentro que esta página le falta claridad de orden... le hecho en falta un segundo menú de etiquetas más específico, por ejemplo con los menús, entradas, slideshows o cositas así que un@ busca muy a menudo. A mi personalmente me cuesta usar el buscador entre tantos y tantos tutoriales que tienes, así como también hecho en falta una imagen que acompañe al título para saber visualmente como queda el código que estás proporcionando, pues es difícil saberlo a primera instancia y venga a abrir links a pestañas distintas (cuando por ejemplo le das click a la etiqueta "CSS", que solamente se ven los títulos).

    Es sólo una observación práctica como usuaria asidua que soy de este web-blog :) Espero que lo tomes en cuenta, creo que nos facilitaría a varios algo más de claridad y dirección para los tutos específicos que buscamos.

    ¡Saludos!

    ResponderEliminar
    Respuestas
    1. Seguro que tienes razón y, sinceramente, tomo nota para la próxima versión que algún día haré.
      Lo más complicado sería lo del segundo menú, pues para eso tendría que añadir nuevas etiquetas en TODOS los posts que ya tengo publicados y eso, también sinceramente, me da mucha pereza. Lo más práctico mientras tanto es que uses el buscador, probando diversas palabras. Por ejemplo "slideshow" casi que no la uso, pero "slider" sí y a veces "visor".
      Otra idea sería que usaras el enlace de la izquierda "Salta". Es un post al azar, pero a veces se descubren cosas que ni se te habría ocurrido buscar :)

      Gracias en cualquier caso. Se aprecian los comentarios constructivos.

      Eliminar
    2. Claro :) Creo que es importante que nos ayudemos un@s a otr@s, sobretodo porque lo vemos des de distintas perspectivas. Lo del post al azar lo he usado alguna vez, pero lo de la "claridad" a la que me refiero es especialmente para los casos de desesperación de cuando sabes lo que quieres pero no lo encuentras :P

      Eliminar
  5. Hola oloman, muchas gracias por este post, llevo hace un tiempo buscando algo así. se me ocurre preguntarte si al submenú se le podrían añadir (no sé cómo llamarlo) listas, columnas...
    Me explico, en tu menú tienes por ejemplo la pestaña países, y yo me pregunto si se podría poner una categoría general, (por ejemplo europa, asia áfrica...) y debajo de cada una de ellas los distintos países.
    Esto que explico lo veo en una web, no se si se puedan poner aqui enlaces o esté prohibido, se llama "caminomundos", y en estructura parece que es el mismo tipo de menú que aquí nos explicas, pero no se si se pueda hacer.

    ResponderEliminar
    Respuestas
    1. Bueno, realmente creo que es lo mismo (hecho con otro sistema), pero que en lugar de contener una lista completa (ul) dentro de cada elemento de la lista principal (li), han metido un montón de texto.

      Eliminar
    2. ...pero he estado probando y ese asunto hace que el código haya que cambiarlo bastante, así que será en otra ocasión que lo explique ;)

      Eliminar
  6. Hola Oloman! Muy útil este tutorial, gracias! Te escribo porque no hay forma de centrarlo en mi blog, este es el link http://luzyhumo.blogspot.com.ar/ qué puedo hacer? Ya probé varias alternativas y nada.

    Gracias!

    Jimena

    ResponderEliminar
    Respuestas
    1. Eso es porque lo has metido dentro del bloque destinado al menú de páginas y entonces, todos los estilos que este lleva están interfiriendo. Para arreglarlo has de hacer las siguientes modificaciones:
      1. Añadir un !important aquí dónde ves el MARGIN.
      ul.fullnav, ul.fullnav ul {
      list-style: none;
      width: 100%;
      margin: 0 !important;
      padding: 0;
      border: 0;
      font-size: 0;
      text-align: center;
      }
      2. Añadir un float: none al final de esta parte:
      ul.fullnav li {
      display: inline-block;
      margin: 0;
      padding: 0;
      font-size: 18px;
      line-height: 60px;
      float: none !important;
      }
      3. Un center: 0 (que no sirve para nada) en este selector, cambiarlo por un left: 0 aquí
      ul.fullnav li ul {
      position: absolute;
      left: 0;
      width: 100%;
      height: 0;
      overflow: hidden;
      background: #999;
      line-height: 0;
      z-index: 3;
      }

      Y ya está ;)

      Eliminar
  7. bueno pos buena explicación...

    ResponderEliminar
  8. Buenas Oloman, gracias por compartir este menú desplegable. He conseguido personalizarlo bastante a mi gusto y la verdad es que queda fenomenal.

    Sin embargo, se me escapa un último detalle: ¿cómo podría programarse el CSS de manera que las sub-pestañas saliesen centradas desde la posición de su pestaña madre? Naturalmente, considerando que si una pestaña se encuentra, por ejemplo, al borde derecho, que las sub-pestañas se recoloquen sin salir del menú, cogiendo espacio de la izquierda.

    Te agradezco el tiempo que inviertes en generar este tipo de contenidos, gracias a los que muchos podemos dejar nuestro blog mucho más atractivo y funcional.

    ¡Salud!

    ResponderEliminar
    Respuestas
    1. No entiendo bien lo que quieres hacer porque las subpestañas salen centradas con respecto al "todo". Este es un menú que funciona así. Quizás lo que quieres es otra cosa como esta.

      Eliminar
  9. Buenas Oloman. ¿Tendrías a mano códigos de menús desplegables como para insertarlos en dreamweaver? Desde ya muchas GRACIAS.

    ResponderEliminar
    Respuestas
    1. No sé cómo funciona Dreamweaver Milton. Nunca lo he usado.

      Eliminar
  10. Hola buenas tardes, ¿por qué escribe ul.fullnav?, solo nos podriamos referir como .fullnav, o estoy equivocado, por su respuesta gracias

    ResponderEliminar
    Respuestas
    1. Una manía mía Gerardo. Efectivamente si pones .fullnav sólo debería funcionar, pero para evitar cualquier tipo de interferencias en otro código CSS que se refiera a listas y que pudiera andar por ahí en medio, me gusta especificarlo así.

      Además también lo hago con la intención de que se vea claro a qué tipo de elemento afectará ese CSS, A la lista en ese caso.

      Eliminar
    2. Gracias por la aclaración, llevo poco tiempo aprendiendo y hay cosas desconocidas aun. Buen dia

      Eliminar
  11. LO MAXIMO MI GRAN PREGUNTA ES COMO ESCRIBO EN CADA MENU? Y SUB MENU?

    ResponderEliminar
  12. Hola Oloman.

    He estado jugando con tu css para hacer un menú en mi blog (www.viulamoto.blogspot.com), el problema está en que me gustaría que el menú tuviera 3 niveles: Menú principal > Submenú > Opciones definitivas, pero no consigo que se vean.

    Te pongo el CSS que estoy usando:

    nav {position: relative; width: auto;}
    ul.fullnav, ul.fullnav ul {list-style: none; width: auto; margin: 0; padding: 0; border: 0; font-size: 0;}
    ul.fullnav {color: transparent;}
    ul.fullnav li {display: inline-block; margin: 0; padding: 0;}
    ul.fullnav li a {display: block; padding: 0 10px; text-decoration: none; color: #ffffff;}
    ul.fullnav li ul {position: absolute; left: 0; width: auto; height: 0; overflow: hidden; background: #444444; line-height: 0; z-index: 3;}
    ul.fullnav li ul li ul{position: absolute; left: 0; width: auto; height: 0; overflow: hidden; background: #444444; line-height: 0; z-index: 3;}
    ul.fullnav ul a {color: #444444;}
    ul.fullnav li:hover a {background: #444444;}
    ul.fullnav li:hover ul {height: auto;}
    ul.fullnav li:hover ul li a {background: transparent;}
    ul.fullnav li:hover ul li a:hover {text-decoration: none; color: #ffffff;}

    Ya que estamos... ¿se podría hacer que el primer menú tan sólo tuviera el ancho para contener el texo?

    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. ¿Por qué no lo montas en un CodePen y desde ahí lo veo? Me ahorrarías mucho trabajo y sobre todo tiempo que no tengo :S

      Eliminar
  13. Hola Oloman, una duda sobre este magnifico menú, es posible ponerle un buscador y que este sea en forma de lupa y se expanda... imagino que sí... ¿Puedes decirme como? un abrazo.

    ResponderEliminar
    Respuestas
    1. Al menú le puedes añadir lo que quieras simplemente escribiendo el correspondiente código HTML justo antes del que forma la lista (ul). Otra cosa sería integrarlo, porque realmente no está ideado para contener nada.

      Por otra parte, lo crear un buscador con ese formato no lo tengo publicado, pero casi seguro que alguien sí lo habrá hecho.

      Eliminar
    2. Ok, gracias, lo miraré.

      Eliminar
  14. NO ME FUNCIONA :c POR QUE, PUSE HASTA EL MISMO HTML Y EL CSS NO MODIFIQUE NADA Y TAMPOCO ME SALE

    ResponderEliminar
    Respuestas
    1. No será exactamente el mismo o no lo habrás puesto dónde debías. Como pudiste comprobar en el ejemplo, el código funciona.

      Eliminar
  15. Cómo tendría que hacerlo yo para que el menú ocupará todo el ancho solo el menú sin la parte desplegable. Este es mi CSS código:
    #header {
    width:100%;
    margin:auto;

    font-family:"Times New Roman", Times, serif;
    }

    ul{
    list-style:none;
    }

    .nav {
    width:500px;
    margin:auto;


    }

    .nav > li {
    float:left;
    }

    .nav li a {
    background-color:#03F;
    color:#F00;
    text-decoration:none;
    padding:10px 12px;
    display:block;
    }

    .nav li a:hover {
    background-color:#036;
    border-radius:20px;

    }



    .nav li:hover > ul {
    display:block;
    }

    ResponderEliminar
  16. En un principio sólo es cuestión de cambiar el 500px de .nav por un 100%

    .nav {
    width:100%;
    margin:auto;
    }

    ResponderEliminar
    Respuestas
    1. Eso también lo probé y no me funciona solo me mueve el menú y pasa de estar casi centrado a estar a la izquierda del todo sin cambiar su ancho

      Eliminar
    2. Acabo de arreglarlo englobando el menú en un div PA y con un ancho del 100%.
      Muchas gracias por tu ayuda de todas formas

      Eliminar
    3. Pues... de nada. Tú lo solucionaste ;)

      Eliminar
  17. Hola Oloman disculpa que sea algo pesado con tantas preguntas. ¿Podrías decirme como puedo ponerle a la izquierda de este menú una imagen o logo, quizá es simplemente con la etiqueta IMG? En cualquier caso imagino que algo de CSS habrá que incluirle... Si además tienes idea de como hacer que sólo aparezca cuando se realiza Scroll...? Por pedir que no quede... En cualquier caso si conoces como incluir la imagen ya sería válido. Gracias por tú tiempo.

    ResponderEliminar
    Respuestas
    1. Hay una manera sencilla de añadir a ese menú una imagen, pero lo del scroll ya requiere una explicación grande... y usar JavaScript.

      Para poner un logo simplemente añade un elemento de lista (li) adicional a los enlaces del menú (ponlo el primero para que salga a la izquierda) y dentro de él ya pones la imagen.

      Para que quede centrado verticalmente con los enlaces, añade esto al CSS:
      nav img {vertical-align: middle;}

      Eliminar
    2. Gracias Oloman, en realidad puse otro menú, aunque este me gusta mucho tiene el inconveniente de no plegarse en la versión móvil y estéticamente es lo que se lleva ahora, además con las rallitas o menú hamburguesa... no obstante intentaré incluirle el logo con la información que me das (Conste que este menu tuyo me gusta más que cualquier otro)

      Eliminar
  18. ¡Hola de nuevo!

    ¡Te he dejado un comentario sobre el menú desplegable, pero ya he conseguido que aparezca tal y como te sale a ti! Qué alivio.

    Un saludo y muchas gracias por compartir tus conocimientos.

    PD: Las explicaciones aquí son infinitamente mejores que en youtube

    ResponderEliminar
    Respuestas
    1. Vaya... ahora que estaba pensando en dar el paso a YouTube XD

      Gracias Ángel

      Eliminar