<h2>Markup</h2>
<pre class="lang:default decode:true">&lt;div class="menu-toggle"&gt;
	&lt;span&gt;&lt;/span&gt;
	&lt;span&gt;&lt;/span&gt;
	&lt;span&gt;&lt;/span&gt;
&lt;/div&gt;</pre>
<h2>Less</h2>
<pre class="lang:less decode:true ">.menu-toggle {
	width: 20px;
	height: 15px;
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
	position: absolute;
	right: 20px;
	// top: 10px;
	bottom: 20px;
	margin: 0;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	z-index: 5;
	span {
		display: block;
		position: absolute;
		height: 1px;
		width: 100%;
		border-radius: 1px;
		left: 0;
		-webkit-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
		background: white;
	}
	span:nth-child(1) {
		top: 0;
		-webkit-transform-origin: left center;
		-ms-transform-origin: left center;
		transform-origin: left center;
	}

	span:nth-child(2) {
		top: 6px;
		-webkit-transform-origin: left center;
		-ms-transform-origin: left center;
		transform-origin: left center;
	}

	span:nth-child(3) {
		top: 12px;
		-webkit-transform-origin: left center;
		-ms-transform-origin: left center;
		transform-origin: left center;
	}
	&amp;.open {
		span:nth-child(1) {
			-webkit-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
			top: -1px;
			left: 3px;
		}
		span:nth-child(2) {
			width: 0;
			opacity: 0;
			filter: alpha(opacity=0);
		}

		span:nth-child(3) {
			-webkit-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
			top: 13px;
			left: 3px;
		}

	}
}
</pre>
&nbsp;