<header>
  <h1>Hamburger Menu? No Thanks, I prefer Hot Dogs.</h1>
</header>
<div class="content">
	<div class="toggle" id="toggle">
		<i class="icon">
		  <div></div>
		  <div></div>
		  <div></div>
		</i>
	</div>
</div>
$hotdog: #C56028;
$buns: #E4AC61;
$ketchup: #C90000;
$mustard: #E68A1D;
$white: #fff;
$black: #1f1f1f;

$toggle-size: 80px;
$bar-height: 10px;
$dog-width: 100%;
$bun-width: 75%;

$colors: (
	body-bg: $black,
	h1-color: $white,
	hotdog: $hotdog,
	buns: $buns,
	ketchup: $ketchup,
	mustard: $mustard
);

@function color($key) {
	@if map-has-key($colors, $key) {
		@return map-get($colors, $key);
	}

	@warn "Unkown '#{$key}' in $colors.";
	@return null;
}

* {
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: grayscale;
}

html {
	font-size: 62.5%;
}

body {
	background: color(body-bg);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header {
	text-align: center;
}

h1 {
	color: color(h1-color);
	font-size: 3.84rem;
	line-height: 1.2;
	margin-bottom: 4rem;
}

.toggle {
	position: absolute;
	width: $toggle-size;
	height: $toggle-size / 2;
	left: 50%;
	transform-origin: 40px 20px;
	transform: translateX(-50%) rotate(0deg);	
	cursor: pointer;
	transition: 0.3s ease;
	
	&:hover {
		.icon div:nth-child(2) {
			&:before,
			&:after {
				width: 80%;
			}
		}
	}
	
	&.active {
		transform: translateX(-50%) rotate(-315deg);
		.icon {
			div {
				&:nth-child(2) {
					opacity: 0;
				}
				
				&:first-child,
				&:last-child {
					top: 15px;
				}
				
				&:first-child {
					transform: translateX(-50%) rotate(90deg);
				}
			}
		}
	}
}

.icon {
	display: block;
	position: relative;	
	
	div {
		position: absolute;
		height: $bar-height;
		border-radius: 10px;
		
		&:first-child,
		&:last-child {
			background: color(buns);
			width: $bun-width;
			left: 50%;
			transform: translateX(-50%);
			transition: 0.2s ease-in-out;
		}
		
		&:first-child {
			top: 0;
		}
		
		&:nth-child(2) {
			top: $bar-height + 5;
			width: $dog-width;
			background: color(hotdog);
			transition: opacity 0.2s ease-in-out;
			
			&:before, &:after {
				position: absolute;
				left: 50%;
				top: 50%;
				content: "";
				display: block;
				height: 2px;
				width: 0;
				border-radius: 10px;
			}
			
			&:before {
				background: color(ketchup);
				transform: translateX(-50%) translateY(calc(-50% - 2px));
				transition: width 0.2s ease-out 0.2s;
			}
			
			&:after {
				background: color(mustard);
				transform: translateX(-50%) translateY(calc(-50% + 2px));
				transition: width 0.2s ease-out;
			}
		}
		
		&:last-child {
			top: $bar-height * 2 + 10;
		}
	}
}
View Compiled
(function($) {
	var toggle;
	
	function onDocumentReady() {
		toggle = $(document.getElementById("toggle"));
		
		toggle.on("click", onToggleClick);
	}
	
	function onToggleClick(e) {
		var clicked = $(e.currentTarget);
		
		clicked.toggleClass("active");
	}
	
	$(onDocumentReady);
})(jQuery);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js