Cómo hacer un menú hamburguesa solo con HTML y CSS

menu responsive con html y css

Cómo hacer un menú hamburguesa solo con HTML y CSS

En el diseño responsive es muy frecuente realizar el conocido como menú hamburguesa, el cual recibe su nombre por el relativo parecido que tiene el típico icono con 3 barras con el famoso manjar habitual de restaurantes de comida rápida.

Aunque para lograr la típica funcionalidad de estos menús se suele recurrir al uso de JavaScript, con un poco de ingenio es posible implementar uno de estos menús solo con HTML5 y CSS3.

menú responsive con html y css

menú responsive con html y css

Antes de empezar es importante remarcar que, para este ejemplo, voy a usar la hoja de estilos reset.css como base, y los iconos de Font Awesome para los dibujos que vamos a necesitar (las 3 barrás para desplegar el menú, y el aspa para cerrar el menú). Si bien el reset.css es opcional, los iconos de Font Awesome son fundamentales para este ejemplo. Aunque el ejemplo, con los cambios adecuados, debería de funcionar perfectamente si usas otros iconos, imágenes o elementos SVG.

El truco para realizar la funcionalidad de este tipo de menú hamburguesa, reside en dos aspectos clave:

  • Usar un input de tipo checkbox para saber cuando el menú está visible o no.
  • Usar el selector de hermanos generales para lograr que el estado del checkbox se refleje en el menú.

La segunda condición tiene una importante implicación, y es que resulta imprescindible que el checkbox y el menú sean hermanos en la jerarquia del HTML y, además, el checbox aparezca antes en el HTML.

Por lo que para cumplir estas condiciones el HTML que vamos a usar deberia de ser similar al siguiente:

<div class="respmenu">
  <input type="checkbox">
  <i class="fas fa-bars"></i>
  <i class="fas fa-times"></i>
  <nav>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
    </ul>
  </nav>
</div>

Tal y como se puede observar, el input de tipo checkbox y el nav con la lista de enlaces del menú, son hermanos. Esto, como ya se ha comentado, es fundamental para después lograr reflejar el estado del checkbox en la visibilidad del menú.

Antes de entrar en detalle en el CSS que va a realizar la magia, vamos a aplicar un poquito de código CSS para simplemente dar algo de aspecto al menú:

body {
  font-family: sans-serif;
}

.respmenu a { 
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 10px 20px;
  border-bottom: 2px solid #456789;
  max-width: 200px;
  background: #234567;
  font-variant: small-caps;
  text-shadow: 1px 1px black;
}

Y ahora vamos a ver el resto del código CSS. En este código vemos que aparece en varios sitios el valor 48px. Este valor viene a ser el tamaño del icono de la hamburguesa. Si lo cambiamos para hacerlo más grande o pequeño, debemos de cambiarlo en todos los sitios donde aparece dicho valor.

.respmenu input[type="checkbox"], .respmenu .fa-bars, .respmenu .fa-times {
  position: absolute;  
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  right: 0;
  top: 0;
  width: 48px;
  height: 48px;  
}

.respmenu .fa-bars, .respmenu .fa-times {
  font-size: 48px;
  pointer-events: none;
}

.respmenu input[type="checkbox"] {
  opacity: 0; 
}

.respmenu {
  color: white;
  position: relative; 
  background: #123456;
  min-height: 48px;
}

.respmenu nav {
  display: none;
}

.respmenu input:checked ~ nav {
  display: block;
}

.respmenu input:checked ~ .fa-bars {
  display: none;
}

.respmenu input:not(:checked) ~ .fa-times {
  display: none;
}

Gracias al selector de de hermanos generales (~) podemos hacer que cuando el input esta en estado :checked, se muestre el nav, y cuando no se encuentra en dicho estado, el menú se oculte. Algo similar hacemos con los iconos de Font Awesome para mostrar/esconder el icono adecuado según el estado del checkbox.

La otra parte de la magia sucede gracias a position: absolute;, que nos permite colocar los iconos justo encima del checkbox. Finalmente, con pointer-events: none; hacemos que los iconos sean “transparentes” a los eventos del ratón, de modo que pese a estar encima del checkbox, no van a recibir ningún click del ratón, y por lo tanto será el checkbox el que los reciba a pesar de estar debajo de los iconos.

Y nada más. Espero que este truco sobre el diseño del menú hamburguesa os haya resultado interesante. Si es así, seguramente también os interese saber como hacer un slider solo con HTML y CSS. Por supuesto, también podéis echarle un vistazo al resto de nuestros artículos de desarrollo Web. Nos vemos en un próximo artículo.

2Comentarios

  • Yederith
    24/11/2020

    ¡Muchas gracias! Me resultó muy útil. (No sé por qué tenías calificación de -11, ya te pasé un +).

    ¡Saludos!

Escribe un comentario