Crear el icono hamburguesa para el menú responsive con animaciones CSS

En este articulo crearemos un icono hamburguesa para el menu responsive o el menu de la web. En los últimos años se ha convertido importante del diseño web responsive y web con que asociamos para que de desplegué el menu de navegación.

See the Pen Hamburger Icon Animation for Menu navigation with CSS by GodoFredo (@GodoFredoNinja) on CodePen.

En el ejemplo podemos ver como el icono hamburguesa se muestra en estado de rasposo cuando no se haya echo click sobre el. Cuando se haya hecho click sobre el mostrara una X con los mismos elementos.

— El HTML que vamos a utilizar es:

<a href="#" class="button-nav--toggle">
    <span></span>
    <span></span>
    <span></span>
</a>

Solo necesitamos un elemento contenedor, en este caso una etiqueta de tipo <a> y dentro de ella tendremos tres etiquetas de tipo <span> que sera encargado de pintar las tres líneas.

— En cuanto al CSS, ocultaremos la línea del medio y los 2 restantes transformaremos rotándolos 45º para formar la X cuando el usuario haya hecho click.

/* BTN for Menu */
.button-nav--toggle {
  background: rgba(207, 159, 159, 0.45);
  height: 48px;
  position: relative;
  -webkit-transition: -webkit-transform .4s;
  transition: -webkit-transform .4s;
  transition: transform .4s;
  transition: transform .4s, -webkit-transform .4s;
  width: 48px;
}
.button-nav--toggle span {
  background-color: #fff;
  display: block;
  height: 2px;
  left: 14px;
  margin-top: -1px;
  position: absolute;
  top: 50%;
  -webkit-transition: .4s;
  transition: .4s;
  width: 20px;
}
.button-nav--toggle span:first-child {
  -webkit-transform: translateY(-6px);
          transform: translateY(-6px);
}
.button-nav--toggle span:last-child {
  -webkit-transform: translateY(6px);
          transform: translateY(6px);
}

/* Menu Active */
.button-nav--toggle.active span:first-child {
  -webkit-transform: rotate(45deg) translate(0);
          transform: rotate(45deg) translate(0);
}
.button-nav--toggle.active span:nth-child(2) {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
.button-nav--toggle.active span:last-child {
  -webkit-transform: rotate(-45deg) translate(0);
          transform: rotate(-45deg) translate(0);
}

Como has podido ver, añadimos la clase active para poder trabajar con el elemento cuando el usuario haya hecho click. Para ello, mediante jQuery hemos usado un toggle para añadir dicha clase:

$(document).ready(function() {
  
  /* CLick BTN (Open and Close) */
	$('.button-nav--toggle').on('click', function(e) {
        e.preventDefault();
		$(this).toggleClass('active');
	});
  
});

Ya solo queda personalizar los colores con los elementos de tu web para integrarlo. Puedes modificarlo en todo momento editando las propiedades del elemento padre y las etiquetas span.

— Espero que te sirva este pequeño tutorial y lo puedas utilizar en tu proyecto.