Animar menú de hamburguesa

Una de las tendencias web que se han utilizado en los últimos años es el menú de hamburguesa, cuya funcionalidad permite mostrar elementos que se encuentran ocultos en una sola interacción, lo que facilita la navegación y permiten dejar más espacio para el contenido.

En el siguiente tutorial te enseñaremos cómo realizar la animación para desplegar el menú, primero el icono se mostrará en estado de reposo cuando no se haya clickeado sobre él y al hacer click se mostrará como formará una X con los mismos elementos cuando se muestre desplegado.

El código HTML será el siguiente
Sólo necesitaremos un div contenedor y dentro de este las barras que formarán la hamburguesa.

<div class="hamburger-menu">
     <div class="bar"></div>
</div>

En cuanto al CSS, transformaremos las dos líneas superiores rotándolas 45º cuando el usuario haya hecho clic:

body {
    background: #f44336;
  }

  .hamburger-menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 60px;
    cursor: pointer;
  }

  .bar,
  .bar:after,
  .bar:before {
    width: 100px;
    height: 10px;
  }

  .bar {
    position: relative;
    transform: translateY(25px);
    background: white;
    transition: all 0ms 300ms;
  }
  .bar.animate {
    background: rgba(255, 255, 255, 0);
  }

  .bar:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 25px;
    background: white;
    transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .bar:after {
    content: "";
    position: absolute;
    left: 0;
    top: 25px;
    background: white;
    transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .bar.animate:after {
    top: 0;
    transform: rotate(45deg);
    transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .bar.animate:before {
    bottom: 0;
    transform: rotate(-45deg);
    transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  }

Se añadió la clase animate para poder transformar el elemento al hacer click sobre el. Utilizaremos jQuery para iniciar la animación.

(function () {
  $('.hamburger-menu').on('click', function() {
    $('.bar').toggleClass('animate');
    })
})();

El resultado visual de la animación será este:

Lo que quedaría es determinar el color de fondo donde estará el menú de hamburguesa o incluso modificar el color de las barras que lo componen.
De esta forma de manera sencilla lograríamos animar nuestro menú de hamburguesa en nuestro sitio web.