ProgramingWeb

¿Como hacer un menú hamburguesa con css y js?

Desde que nacieron los dispositivos móviles este tipo de menús son los más comunes en toda la web y en este tutorial te enseñare como crear uno desde cero usando un poco de css y javascript.

Primero definamos el html básico para este ejercicio


<header>
    <a>Menú hamburguesa<a>
    <nav class="nav" >
      <a>Link</a>
      <a>Link</a>
      <a>Link</a>
      <a>Link</a>
      <a>Link</a>
      <a>Link</a>
    </nav>
    <button class="hamburger" >
        <svg viewBox="0 0 100 80" width="30" height="30" fill="#000">
          <rect width="90" height="10"></rect>
          <rect y="30" width="80" height="10"></rect>
          <rect y="60" width="70" height="10"></rect>
        </svg>
    </button>
</header>

-Definimos un header clásico con un enlace que debiera ser el logo de la web pero para efectos prácticos de este tutorial coloco menú hamburguesa.

-Luego una etiqueta nav con 6 enlaces con la clase nav para poder manipularla desde css.

-y por último un botón con un código svg que dibujara el típico menú hamburguesa con las tres lineas horizontales.

Agregando css a nuestro menú hamburguesa

header {
  display: flex;
  justify-content: space-around;
}

.nav {
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: -100%;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: #fff;
}

.nav.open {
  left: 0;
}

.nav a {
  padding: 1rem;
}

.hamburger {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  padding: 0.5em 1em;
  background: #ea42ff;
  border: none;
  border-radius: 50%;
  box-shadow: 1px 1px 3px #000;
  cursor: pointer;
  z-index: 1000;
}

@media screen and (min-width: 720px) {
  .nav {
    position: static;
    flex-direction: row;
    width: 60%;
    height: auto;
  }

  .hamburger {
    display: none;
  }
}

-Al header le aplicamos display:flex; justify-content:space-around; Para que el enlace con el logo y la etiqueta nav queden en paralelo una con la otra.

-Los estilos de la etiqueta nav son los que llevaran por defecto en pantallas pequeñas, position: fixed; top:0;left:-100%; el -100% es para que en un principio no se muestre en la pantalla. Hacemos que ocupe toda la pantalla asignándole un width: 100%; height:100vh. luego damos algunas toques con flexbox para centrar y separar un poco los enlaces.

-.nav.open con estas clases agregamos los estilos que se ejecutarán solo cuando ambas estén juntas dentro de la etiqueta nav. Para así lograr que se muestre el menú en pantalla.

-.hamburger al botón le damos unos estilos base sencillos y lo ponemos en la parte inferior de la pantalla. NOTA por temas de usabilidad yo prefiero ponerlo allí, ya que en smartphones es más cómodo para el usuario, porque hay están más cerca nuestros dedos. También le asignamos un z-index: 1000; para que este por encima del overlay que aparecerá cuando se haga click en el botón.

-Por último una media query sencilla donde le indicamos como se debe mostrar en versión desktop.

Lo más fácil agregar javascript a nuestro menú hamburguesa

const nav = document.querySelector(".nav")

document.querySelector(".hamburger").addEventListener("click", e => {
  e.preventDefault()

  if (nav.classList.contains("open")) {
    nav.classList.remove("open")
  } else {
    nav.classList.add("open")
  }
})

-Primero usando document.querySelector('.nav') declaramos una constante nav para tenerla referenciada y operar luego sobre ella.

-Seleccionamos el botón .hamburger y le agregamos un evento de click y pasamos una función con el parámetro (e), luego escribimos e.preventDefault() para evitar cualquier comportamiento indeseado cuando se haga click en el botón.

-Por último con una condicional verificamos si la etiqueta nav tiene la clase open, si la tiene se la quita y si no se la agrega.

Con eso ya tienes un menú hamburguesa bastante funcional un poco feo, pero estoy seguro de que tú puedes mejorarlo. Si quieres ver el ejercicio completo puedes ir al siguiente enlace Menú hamburguesa codepen