Animaciones para menú hamburguesa

3 animaciones para tus menú hamburguesa

3 animaciones para menú hamburguesa

Es común encontrarnos con menús hamburguesa en los diseños a implementar, si quieres agregar un toque diferente a tus menús, aprende 3 animaciones diferentes que puedes crear.

Necesitamos la siguiente base de HTML para tener la estructura de nuestro menú.

    <button class="menu" type="button"><span class="menu_line"></span> Menu</button>

    <script>
      const button = document.querySelector(".menu");

      button.addEventListener("click", () => {
        button.classList.toggle("menuIsActive");
      });
    </script>

Además hay que agregar un par de estilos para posicionar y añadir dos pseudo elementos (before y after)

.menu {
  width: 4rem;
  height: 3.5rem;
  background-color: #333;
  border: none;
  padding: 0;
  border-radius: 0.5rem;
  text-indent: 5rem;
  overflow: hidden;
  position: relative;
}

.menu:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}
.menu_line,
.menu_line::after,
.menu_line::before {
  position: absolute;
  height: 0.25rem;
  background-color: #f6f6f6;
  border-radius: 0.25rem;
  display: block;
}

.menu_line {
  width: 75%;
  left: 15%;
  top: 50%;
  transform: translateY(-50%);
}

.menu_line::before,
.menu_line::after {
  content: "";
  left: 0;
  width: 100%;
}

.menu_line::before {
  top: -0.75rem;
}
.menu_line::after {
  top: 0.75rem;
}

Ya tendremos todo listo para comenzar a probar diferentes animaciones, la primera que crearemos consiste en dar el efecto que estamos apachurrando el menú y al final se convierte en una X.

.menu_line,
.menu_line:before,
.menu_line:after {
  transition: top 0.2s 0.2s, transform 0.2s, background-color 0.4s 0.2s;
}

.menuIsActive .menu_line {
  background-color: transparent;
  transition: background-color 0.2s;
}

.menuIsActive .menu_line:before {
  transform: rotate(-45deg);
  top: 0;
  transition: top 0.2s, transform 0.2s 0.14s;
}

.menuIsActive .menu_line:after {
  transform: rotate(45deg);
  top: 0;
  transition: top 0.2s, transform 0.2s 0.14s;
}

Segunda animación

En la segunda animación sacaremos la línea de en medio como si fuera un slide de alguna presentación.

.menu_line,
.menu_line:before,
.menu_line:after {
  transition: transform, left, top, 0.16s ease-in-out;
}

.menuIsActive .menu_line {
  transform: translateX(-4rem);
}

.menuIsActive .menu_line:before {
  transform: translateX(2rem) rotate(135deg);
  left: 2rem;
  top: 0;
}

.menuIsActive .menu_line:after {
  transform: translateX(2rem) rotate(-135deg);
  left: 2rem;
  top: 0;
}

Tercera animación

En esta animación haremos que parezca un elemento girando como los fidget spinner.

.menu_line,
.menu_line:before,
.menu_line:after {
  transition: transform, top, opacity, cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.2s;
}

.menuIsActive .menu_line {
  transition-delay: 0.1s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: rotate(225deg);
}

.menuIsActive .menu_line:before {
  top: 0;
  opacity: 0;
  transition: top, opacity, 0.1s ease-out;
}

.menuIsActive .menu_line:after {
  top: 0;
  transition: top 0.1s ease-out, transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s;
  transform: rotate(-90deg);
}

Si quieres seguir aprendiendo más de HTML y CSS te invito al Curso Esencial de HTML y CSS, aprenderás las bases necesarias para darte cuenta que con un par de líneas de código puedes crear increíbles cosas y que hay más de un solo camino para el mismo resultado.