Animaciones CSS para el icono hamburguesa del menú responsive

El menú responsive o icono hamburguesa se ha convertido en los últimos años, sobre todo con la aparición del diseño web responsive, en un elemento reconocible y que asociamos con la acción de desplegar el menú de la web, sobre todo en los dispositivos móviles, pero también en otras resoluciones como en estos ejemplos.

Hay otros elementos en el diseño web que se han convertido en estándares y que intuitivamente reconocemos y usamos cuando visitamos una web. Por ejemplo, la ubicación del logotipo en el menú superior además de ser representativa para el branding, también es reconocido como un enlace que al hacer clic nos devuelve a la home, al igual que un icono de una casa en el menú. Lo mismo sucede con los iconos de redes sociales, que si se encentra al comiendo o al final de un artículo nos indican que podemos compartir el contenido.

El icono de la lupa es también es identificable como una opción de búsqueda si se encuentra dentro del menú o en un área de widget, mientras que si se encuentra cerca de una imagen, lo asociamos con la acción de hacer zoom o ampliar. Aquí es importante también el contexto el elemento.

Animaciones para indicar cuando el menú hamburguesa está oculto o desplegado

Sin embargo podemos ir un paso más allá y mejorar la UX de nuestro diseño web reutilizando el elemento que despliega el menú responsive con una doble función: icono hamburguesa cuando está oculto e icono con una X para poder recoger el menú y seguir navegando por la web. Todo ello con una animación y CSS.

En el ejemplo podemos ver como el icono hamburguesa se mostrará en estado de reposo cuando no se haya clicado sobre el y el menú de navegación de la web se mantenga recogido y como formará una X con los mismos elementos cuando se muestre desplegado. El HTML que vamos a utilizar es:

<div class="menu-toggle">
	<i></i>
</div>

Solo necesitamos un elemento contenedor, en este caso un div y un elemento que será el encargado de pintar las tres líneas que usaremos gracias a los pseudoelementos :after y :before, en este caso el elemento i, pero podría ser un span o cualquier otro.

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

.menu-toggle {
	height: 32px;
	position: relative;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
	margin: 90px auto;
	width: 40px;
}
.menu-toggle:hover {
	color: #999;
}
.menu-toggle i,
.menu-toggle i:after,
.menu-toggle i:before {
	display: block;
	position: absolute;
	height: 3px;
	width: 40px;
	right: 0;
	background: #999;
	border-radius: 2px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}
.menu-toggle i:after,
.menu-toggle i:before {
	content: '';
}
.menu-toggle i:after {
	top: -32px;
}
.menu-toggle i:before {
	top: -16px;
}
.menu-toggle i {
	top: 32px;
}
.menu-toggle.open i:after {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	top: -22px;
}
.menu-toggle.open i:before {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: -22px;
}

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

$(document).ready(function(){
	$('.menu-toggle').click(function(){
		$(this).toggleClass('open');
	});
});

Ya solo queda personalizar los colores con los elementos de tu web para integrarlo. Como verás el tamaño del icono es muy grande, esto está hecho a propósito para el ejemplo, pero puedes modificarlo en todo momento editando los valores de width y height del contenedor y del elemento i, así como los valores top y right de posición antes y después de la transformación. Puedes ver un ejemplo en vivo en la demo de nuestra plantilla para WordPress Rosalie.

Usando animaciones y CSS con sentido

Las animaciones y demás elementos interactivos en diseño web son bienvenidos siempre que tengan sentido y mejores la usabilidad del site. Objetos y elementos superfluos que no aportan nada y que únicamente entorpezcan la navegación y velocidad de carga no tienen sentido a día de hoy.

Por eso hazte siempre una pregunta antes de añadir algún elemento a tu web: ¿mejorará esto la experiencia de navegación de mis usuario? Si la respuesta es sí, adelante, pero si es no, mejor mantener el site limpio y usable antes de entorpecer la UX. De las animaciones con sentido uno nunca se cansa, las ornamentales dejan de molar a la tercera vez que las ves 🙂