Create an Animated Menu Button using CSS and JQuery

You see subtle animations used across the web all the time these days, some are using animated SVG’s some are using JQuery animation libraries but a lot of the time they are using simple CSS transitions and some simple JQuery, hopefully the code snippets below will help you create your own animated Menu button, the goal is to go from the standard ‘Hamburger’ menu to a ‘X’ on a single click and back again on the next click.

First create your HTML Button

<div id="toggle">
	<span class="line1"></span>
	<span class="line2"></span>
	<span class="line3"></span>
</div>

Next apply your CSS to that button

I’ve included a catch all for the Box Sizing so to include the padding within the HTML element rather than adding too, I use this for all my sites as it makes far more sense to me coming from a Print & Graphic Design background for the Padding to act like an Inner Margin.

*, *:before, *:after {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Menu Toggle */
#toggle{
	height: 40px;
	width: 40px;
	display: block;
	background: #222222;
	cursor: pointer;
	padding: 5px 5px 0 5px;
	transition: all 0.2s ease-in-out;
	border-radius: 3px;
}

#toggle span{
	height: 3px;
	width: 20px;
	background: white;
	display: block;
	margin: 5px;
	position: relative;
	transition: all 0.2s ease-in-out;
}

Now for the JQuery

Let’s add a class to our HTML button element, this Class will help us to trigger the animation.

$(document).ready(function() {

    //ADD ANIMATE CLASS TO TOGGLE ELEMENT
    $( '#toggle' ).on('touchstart click', function(e){
		e.preventDefault();
		if( $(this).hasClass('animate') ){
			$(this).removeClass('animate');
		} else {
			$(this).addClass('animate');
		}
	});
	
});

Time for some Animation

Once you’ve checked the JQuery you’ve added is applying the ‘animate’ class we need to add some more css to apply the animation using CSS trnaitions, remember you can transition most CSS attributes so get creative. In this example i’m rotating the top and bottom ‘lines’ and fading out the middle one, this gives the illusion that the ‘Hamburger’ menu is morphing into the ‘X’ while at the same time increasing the Border-radius.

/* Menu Toggle - Animation */
#toggle.animate{
	border-radius: 30px;
}

#toggle.animate .line1{
	transform: rotate(45deg);
	transform-origin: center;
	top: 8px;
}

#toggle.animate .line2{
	opacity: 0;
}

#toggle.animate .line3{
	transform: rotate(-45deg);
	transform-origin: center;
	bottom: 8px;
}

Prev Next