animated-hamburger.scss

/** 
The following mixin works when @include[ed] onto a div containing three empty spans:

<div class="animated-hamburger">
	<span></span>
	<span></span>
	<span></span>
</div>

To get the animation on click, use the following JQuery:

$('.animated-hambgurger').click(function() {
	$(this).toggleClass('active');	
});

*/

@mixin createHamburger($width: 30px, $height: 25px, $barHeight: 5px, $barColor: black, $duration: .4s, $rotation: 90deg) {
	width: $width;
	height: $height;
	position: relative;
	transition: $duration ease all;
	span {
		position: absolute;
		left: 0;
		display: block;
		width: $width;
		height: $barHeight;
		background-color: $barColor;
		opacity: 1;
		&:nth-child(1) {top: 0;}
		&:nth-child(2) {top: 50%; margin-top: -($barHeight/2);}
		&:nth-child(3) {bottom: 0;}

		transition: $duration/2 $duration/2 ease top,
					$duration/2 $duration/2 ease bottom,
					0s $duration/2 ease opacity,
					$duration/2 ease transform;
	}
	&.active {
		transform: rotate($rotation);
		span {
			transition: $duration/2 ease top,
			      $duration/2 ease bottom,
			      0s $duration/2 ease opacity,
			      $duration/2 ease $duration/2 transform;
		}
		span:nth-child(1) {
			transform: rotate(45deg);
			top: ($height/2) - ($barHeight/2);
		}
		span:nth-child(2) {
			opacity: 0;
		}
		span:nth-child(3) {
			transform: rotate(-45deg);
			bottom: ($height/2) - ($barHeight/2);
		}
	}
}