CSS animations for the hamburger icon on the responsive menu

The responsive menu or hamburger icon has become in recent years, especially with the appearance of responsive web design, a recognizable element that we associate with the action of deploying the web menu, especially on mobile devices, but also in other resolutions as you can see on these examples.

There are other elements in web design that have become standard and that we intuitively recognize and use when visiting a website. For example, the location of the logo on the top menu in addition to being representative for the branding, is also recognized as a link that upon clicking returns us to the home, as well as an icon of a house in the menu. The same thing happens with social networking icons; they tell us that we can share the content at the beginning or at the end of an article.

The magnifying glass icon is also identifiable as a search option if it is within the menu or in a widget area, while if it is close to an image, we associate it with the action of zooming. Here is also important the context of the element.

Animations to indicate when the hamburger menu is hidden or unfolded

We can go a step further and improve the UX of our web design by reusing the element that displays the responsive menu with a double function: hamburger icon when hidden and icon with an X to be able to pick up the menu and continue browsing the web. All this with animations and CSS.

In the example we can see how the hamburger icon will be displayed in idle state when it has not been clicked on, and how it will form an X with the same elements when it is displayed. The HTML that we are going to use is:

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

We only need a container element, in this case a div and an element that will be in charge of painting the three lines we will use thanks to the pseudo-elements::after and :before, in this case the element i, but it could be a span or any other .

As for the CSS, we will transform the two upper lines by rotating them 45º when the user has clicked:

.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;
}

As you can see, we have added the open class to work with the element when the user clicks. To do this, we have used jQuery with a toggle to add this class:

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

Now it is only necessary to customize the colours with the elements of your web to integrate it. As you will see the size of the icon is very large, this is done purposefully for this example, but you can modify it at all times by editing the width and height values of the container and the element i, as well as the top and right position values before and after the transformation. You can see a live example in the demo of our Rosalie WordPress template.

Using animations and CSS correctly

Animations and other interactive elements in web design are welcome as long as they make sense and improve the usability of the site. Objects and superfluous elements that do not contribute anything and that only obstruct navigation and loading speed do not make sense to this day.

So always ask yourself a question before adding any element to your website: will this improve my users browsing experience? If the answer is yes, go ahead, but if it is not, better to keep the site clean and usable before it hinders the UX. We never get tired of the animations with sense, but we stop to like the others to the third time we see them.