A Pen by Tom Speak.

A-Pen-by-Tom-Speak.markdown

A Pen by Tom Speak

A Pen by Tom Speak on CodePen.

License.

index.html

<a id="nav-toggle" href="#"><span></span></a>

script.js

	$('#nav-toggle').on('click', function(ev) {
		$(this).toggleClass('active');
	    
    ev.preventDefault();
	});

style.scss

@import "compass";
@import "compass/css3/transition";
@import "compass/css3/transform";

#nav-toggle {
	position: absolute;
	top: 50%;
	left: 50%;
	cursor: pointer;
	padding: 10px 35px 16px 0px;

	& span, & span:before, & span:after {
		position: absolute;
		height: 5px;
		width: 35px;
		display: block;
		background: black;
		border-radius: 1px;
		content: '';
	 	@include single-transition(all, 300ms, ease-in-out);
	}

	& span:before {
		top: -10px;
	}

	& span:after {
		bottom: -10px;
	}

	&.active span {
		background-color: transparent;

		&:before, &:after {
			top: 0;
		}

		&:before {
			@include rotate(45deg);
		}
		&:after {
			@include rotate(-45deg);
		}
	}
}

Excellent! Thanks Tom :-)