Another 'burger

Another 'burger.markdown

Another 'burger

A Pen by Matthew A.K. Smith on CodePen.

License.

index.html

<a href="#toggle" class="hamburgler">
	<div class="bun top"></div>
	<div class="meat"></div>
	<div class="bun bottom"></div>
</a>

script.js

$(document).ready(function(){
	$('.hamburgler').click(function(e){
		e.preventDefault();
		$(this).toggleClass('no-hamburgler');
	});
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

// Colors

$light: #FBBF40;
$dark: #CB4B1F;
$radius: 50px;

body{
	background: $light;
	text-align: center;
	font-size: 200%;
	color: $dark;
	display: flex;
	flex-direction: column;
	height: 100%;
	position: absolute;
	width: 100%;
	
	& > *{
		margin: auto;
	}
}

.hamburgler{
	width: 150px;
	height: 150px;
	display: block;
	transition: .3s ease all;

	&.no-hamburgler{
		transform: rotate(-45deg);
	}
}

.bun,
.meat{
	display: block;
	width: 100%;
	background: $dark;
	height: 20%;
	transition: .3s ease all;
	border-radius: $radius;
}

.top{
	 .no-hamburgler & {
		height: 38%;
		width: 20%;
		margin-left: 40%;
		border-radius: $radius $radius 0 0;
	}
}

.bottom{
	.no-hamburgler & {
		height: 38%;
		width: 20%;
		margin-left: 40%;
		border-radius: 0 0 $radius $radius;
	}
}

.meat{
	margin: 20% 0;
	
	.no-hamburgler &{
		margin: 2% 0;

	}
}