Cómo Crear un Botón de Menú Animado con CSS

En este tutorial aprenderás a crear un botón de menú animado con CSS. En concreto, nos referimos al típico botón con forma de hamburguesa que incluye tres líneas horizontales. Cuando el menú se despliega, el botón cambiará de posición sus elementos, mostrando la forma de una equis «X». Primero veremos cómo crear el botón básico y luego, en otro apartado, crearemos la animación usando transformaciones CSS.

Botón de menú básico

Lo más habitual a la hora de crear este tipo de botones es el uso de iconos, como por ejemplo los que se incluyen con la fuente Font Awesome. Sin embargo, siempre es más efectiva la vía simple, por lo que en este tutorial no haremos uso de dichos iconos, creando todo mediante HTML y CSS.

Lo primero que haremos será crear el botón de la forma más básica posible:

<a id="nav-nutton" href="#">
  <span></span>
</a>

Lo que hemos hecho es crear un sencillo botón con la clase .nav-boton, a la que asignaremos el siguiente estilo:

#nav-button span {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 40px;
  background: white;
  position: absolute;
  display: block;
  content: '';
  background:#000;
}

Esto creará un botón que constará exclusivamente de una línea negra. Podríamos agregar más elementos HTML para las otras dos líneas del botón, pero en este caso vamos a utilizar los selectores de CSS after y before, por lo que el código CSS final sería el siguiente:

#nav-button {
  cursor: pointer;
  position:relative;
  left: 50%; top: 50%;
  padding: 10px 40px 15px 0px;
}

#nav-button span, #nav-button span:after, #nav-button span:before {
  border-radius: 1px;
  height: 5px;
  width: 40px;
  background: white;
  position: absolute;
  display: block;
  content: '';
  background:#000;
}

#nav-button span:before {
  top: -10px;
}
#nav-button span:after {
  bottom: -10px; 
}

Si has seguido este ejemplo, podrás comprobar que ahora se muestran tres líneas horizontales, por lo que el botón básico estaría ya terminado.

Botón de menú animado

Ahora vamos a animar el botón de modo que cuando esté activo se muestre una «X», regresando a su forma normal, con tres líneas, cuando no esté activo. De esta forma los usuarios tendrán una idea más clara de lo que ocurrirá cuando pulsen el botón.

Para cumplir nuestro cometido usaremos transiciones y transformaciones CSS mediante las propiedades transition y transform respectivamente. Todas estas propiedades son compatibles con todos los navegadores modernos. En caso de que quieras dar soporte a algún navegador demasiado antiguo tendrías que realizar las transformaciones necesarias mediante JavaScript.

Primero vamos a modificar nuestro botón agregando una transición mediante CSS, de modo que cualquier efecto dure 500ms, por lo que nuestra clase final para el botón sería la siguiente:

#nav-button span, #nav-button span:after, #nav-button span:before {
  transition: all 500ms ease-in-out;
  border-radius: 1px;
  height: 5px;
  width: 40px;
  background: white;
  position: absolute;
  display: block;
  content: '';
  background:#000;
}

Ahora vamos a utilizar JavaScript para agregar la clase CSS active al botón cuando hagamos clic en él. Del mismo modo, la clase active se eliminará cuando hagamos clic en el botón y la clase ya esté presente en el botón. Primero agregamos una acción al evento «click» del botón. En su interior, lo ideal es usar la función toggle de JavaScript, que eliminará o agregará la clase según sea necesario:

document.querySelector( "#nav-button" ).addEventListener( "click", function() {
  this.classList.toggle( "active" );
});

Ahora vamos agregar los estilos necesarios que se aplicarán cuando la clase active esté presente en el botón.

#nav-button.active span {
  background-color: transparent;
}
#nav-button.active span:before, #nav-button.active span:after {
  top: 0;
}

#nav-button.active span:after {
  transform: rotate(-45deg);
}

#nav-button.active span:before {
  transform: rotate(45deg);
}

Lo que hemos hecho es hacer transparente el elemento span del menú mediante la propiedad background-color: transparent, pero no así las barras superior e inferior, que inclinamos 45° y -45° respectivamente para que tengan forma de cruz. Para la transformación hemos usado una rotación, que durará 500ms, que es el tiempo que hemos definido para la animación.

Fin: Código completo

Si quieres puedes consultar el código en CodePen. Además también puedes encontrarlo a continuación:

See the Pen Animated CSS Menu Button by Eduardo (@edulazaro) on CodePen.36754

So quieres, también puedes consultar cómo integrar el botón que hemos creado en un menú responsivo, que es algo que tratamos en el siguiente artículo:

• Cómo crear un menú responsivo con CSS

Y esto ha sido todo.

---