Crea un menú hamburgesa sólo con HTML y CSS

Crear un menú hamburgesa sólo con HTML y CSS es un truco avanzado de CSS pero muy sencillo de aprender. Analicemos el siguiente código:

.menu{
  display: none;
}

.checkbox:checked ~ .menu{
  display: block;
}

Tenemos una clase menú, que inicialmente está oculta con la propiedad display: none

Y luego tenemos la magia. Una clase chekbox, con la pseudoclase :checked y el selector ~ apuntando hacia el menú. Lo que estamos diciendo aquí es que cuando el checkbox esté seleccionado, el menú cambie su display a block.

Son dos conceptos muy importantes y sencillos que hay que aprender:

👉 Selector «~» virgulilla

La virgulilla selecciona un elemento hermano dentro de nuestro HTML. Entonces una condición inicial es que los elementos con los que vamos a trabajar estén uno a lado del otro.

👉 Pseudoclase :checked

Esto nos indica si el checkbox está seleccionado o no.

Para que el código CSS anterior funcione, también tenemos que tener en cuenta el HTML el mismo que es el siguiente:

<body>
  <input class="checkbox" type="checkbox">
  <nav class="menu">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </nav>
</body>