Creación de un menú horizontal con sub menú desplegable mediante CSS

Creación de un menú horizontal con sub menú desplegable mediante CSS

5
(1)

Esta publicación es una continuación de un anterior ejemplo de creación de un menú horizontal con CSS.

Las siguientes lecturas te pueden resultar de interés:

  1. Ejemplo de creación de un menú horizontal con CSS
  2. Diferencia entre display y visibility
  3. Propiedad :hover

El resultado que queremos obtener es algo parecido a la imagen siguiente:

código menú desplegable

El código html usado es el siguiente:

<nav><ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Quiénes somos</a></li>
        <li><a href="#">Servicios</a>
            <ul><li><a href="">Servicio 1</a></li>
            <li><a href="">Servicio 2</a></li>
            <li><a href="">Servicio 3</a></li>
            <li><a href=""></a>Servicio 4</li></ul>
            </li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contacto</a></li>
    </ul></nav>

Estrategia mediante inline-block

*{margin:0;padding:0;box-sizing:border-box;font-size:0;}  
nav a{
      text-decoration:none;
      color:inherit;
      font-size:14px;
      }
            
nav li{
      display:inline-block;
      width:150px;
      height:30px;
      padding:5px 10px;
      background-color:#000;
      border:1px solid #000;
      text-align:center;
      color:#fff;
      position:relative;
}
            
nav li:hover{
      background-color:#fff;
      color:#000;
      }
            
nav li>ul{
      display:none;
      }

nav li:hover>ul{
      display:block;
      position:absolute;
      top:30px;
      left:0px;
}

Sería muy interesante que en tu navegador tengas abiertas 2 ventanas.

En la primera esta lectura. En la segunda el ejemplo de menú horizontal para poder comparar el código. Hay muchas similitudes pero algunas diferencias importantes.

Por ejemplo:

  • El ancho de los elementos <li> en la resolución que presento ya no se define en porcentajes. Esto es así porqué en sub menú tomaría como referencia una medida pequeña y lo que queremos es que los elementos inline-block se apilen unos debajo de otros.
  • Los elementos <li> tienen ahora un posicionamiento relativo. De este modo podremos trabajar el sub menú mediante posicionamiento absoluto.

Fijaros en los selectores nav li>ulnav li:hover>ul.

El primero indica aquellos elementos ul directamente después de un li. Esto es el sub menú al que se le da la propiedad display:none.

Sin embargo cuando pasamos el ratón por encima de cualquier <li> que directamente después tenga un <ul>, que el <ul> pase a ser de tipo display:block o inline-block.

Finalmente el elemento <ul> contenido dentro de un li pasa a mostrarse pero debemos darle un posicionamiento absoluto referenciado respecto de su <li>. Exactamente deberemos desplazarlo la altura del elemento <li>. Puesto que en los estilos genéricos del documento le hemos dado la propiedad box-sizing:border-box; sabemos seguro que la altura es la que indiquemos con la propiedad height. En el caso del ejemplo exactamente 30px.

¡Hola!

Querido lector,

¿Te animas a hacer un menú vertical con un sub menú horizontal y después repetirlo con un sub menú vertical ?

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 1

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

4 Comments
  • Hermann
    Posted at 21:19h, 11 mayo Responder

    Funciona porque solo tienes un desplegable.
    Si tuvieses mas, esto es, otro desplegable en BLOG o QUIENES SOMOS, se te desplegarían todos y quedaría bastante feo.
    Confunde algo éste tutorial.

    • Francesc Ricart
      Posted at 20:04h, 12 mayo Responder

      ¡Gracias por tu comentario Hermann!

      Es cierto lo que dices, de lo contrario la publicación se hubiese titulado con sub sub menú.

      En realidad esta publicación es un ejercicio que suelo hacer en clase y que viene muy bien para aprender a usar los distintos tipos de posicionamiento de cajas.

      Saludos,

  • Luis Peña
    Posted at 20:59h, 11 junio Responder

    Exelente. Como hago para que la barra abarque el 100% de la pagina? Saludos!

    • Francesc Ricart
      Posted at 01:15h, 12 junio Responder

      Muy buena pregunta,
      Entonces el css se debe replantear prácticamente entero.

Post A Comment

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.