Animated hamburger navigation icon

button-styles.scss

/* The navigation button x close effect
/* with help from: http://sarasoueidan.com/blog/navicon-transformicons/
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + */

$button-size : 18px; 

$transition: .3s; // adjust this to adjust animation speed

/* Styles for the button itself */

	button.lines-button {
		position: absolute;
		z-index: 101;
		width: 44px;
		height: 44px;
		display: inline-block;
		padding: $button-size/2 $button-size/4;		
		@include transition-duration(.3s);
		cursor: pointer;
		user-select: none;
		top: 240px;
		left: 22px;
		border: 0px;
		outline: none;

		@include border-radius(50%);
		background: #848b7b;
		background: rgba(0,0,0,0.2); 	

		&:hover {
			opacity: 1;
		}

		&:active {
			@include transition-duration(0s);
			background: rgba(0,0,0,.1);
		}
	}


/* Styles and a mixin to create the lines of the hamburger */

	@mixin line {
	  display: inline-block;
	  width: 18px;
	  height: 3px;
	  background: white;
	  @include transition-duration(.3s);
	}

	.lines {
		@include line;
		position: relative; 
		top: -3px;


		/*create the upper and lower lines as pseudo-elements of the middle line*/
		&:before, &:after {

			@include line;
			position: absolute;
			left: 0;
			content: '';
			@include transform-origin(1.3, center);
		}

		&:before { top: $button-size/3; }
		&:after { top: -$button-size/3; }
	}


/* The hover state on the button - the lines separate slightly */

	.lines-button:hover {
	  @include opacity(1);
	     
	  .lines {
	    &:before { top: $button-size/3.5; }
	    &:after { top: -$button-size/3.5; }
	  }
	}


/* When you click the button, trigger the X animation effect */

	.lines-button.closeit {

	}

	.lines-button.closeit .lines{
	    &:before,
	    &:after {
	      top: 0;
	      width: 18px;
	    }
	   
	    &:before { @include rotate3d(0,0,1,40deg); }
	    &:after { @include rotate3d(0,0,1,-40deg); }
	}

	.lines-button.closeit .lines{
	    &:before, &:after{
	      -webkit-transform: none;
	      width: $button-size;
	      top:0;
	    }
	}

	.lines-button.closeit .lines{
	 
	    /*hide the middle line*/
	    background: transparent;
	 
	    /*overlay the lines by setting both their top values to 0*/
	    &:before, &:after{
	    	@include transform-origin(50% 50%);
	      	top:0;
	      	width: $button-size;
	    }
	 
	    // rotate the lines to form the x shape
	    &:before{
	    	@include rotate3d(0,0,1,45deg); 
	    }
	    &:after{
	    	@include rotate3d(0,0,1,-45deg); 
	    }
	}



/* The button for IE 9 and under
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + */

html.ltie9 {
	button.lines-button {
		background: transparent url(../../images/icon/ubc-stories-hamburger-nav.png) no-repeat center center;
		
		&:hover {
			@include opacity(0.5);
			background-color: transparent;
		}

		.lines {
			display: none;
		}
	}
}

button.html

<button class="stories-menu-hamburger lines-button arrow arrow-left" type="button" role="button" aria-label="Toggle Navigation">
  <span class="lines"></span>
</button>

js.js

		$(document).ready(function() {
			$('button.lines-button').click(function() {
				$(this).toggleClass('closeit');

				$('#nav-panel').slideToggle('slow','swing',function() {
					console.log('animation complete');
				});
			})
		});