Material design nav animation

index.html

<header>
			  <div class="bubbleback"></div>
			  <div class="bubble"></div>
			  <div class="bubble-wrap">
				    <div class="bar first"></div>
		        <div class="bar second"></div>
		        <div class="bar third"></div>
			    </div>
		</header>
		
		<div class="website"></div>

Material design nav animation.markdown

Material design nav animation

A Pen by Irem Lopsum on CodePen.

License.

script.js

$(".bubble-wrap").click(function(){
	$(".bubble").toggleClass("active");
	$(".bubbleback").toggleClass("active");
	$(".first").toggleClass("active");
	$(".second").toggleClass("active");
	$(".third").toggleClass("active");
});

scripts

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

style.scss

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

header {
	background-color: #3498db;
	width: 100%;
	height: 200px;
	overflow: hidden;
	position: fixed;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.website {
	width: 100%;
	height: 100vh;
	background-color: #2c3e50;
}

.bubble-wrap {
	height: 60px;
	width: 60px;
	background-color: transparent;
	top: 70px;
	right: 70px;
	position: absolute;
	border-radius: 50%;
	cursor: pointer;
	-webkit-transform: scale(1);
	-webkit-transition: all 0.3s ease-out;
	display: block;
}

.bubble-wrap.active {
	display: none;
}

.bubble {
	height: 60px;
	width: 60px;
	background-color: white;
	top: 70px;
	right: 70px;
	position: absolute;
	border-radius: 50%;
	-webkit-transform: scale(1);
	-webkit-transition: all 0.3s ease-out;
}

.bubble.active {
	-webkit-transform: scale(100);
	-webkit-transition: all 0.6s ease-out;
	-webkit-transition-delay: .4s;
}

.bubbleback {
	height: 60px;
	width: 60px;
	background-color: white;
	top: 70px;
	right: 70px;
	position: absolute;
	border-radius: 50%;
	-webkit-transform: scale(1);
	opacity: 1;
}

.bubbleback.active {
	-webkit-transform: scale(1.5);
	opacity: 0;
	-webkit-transition: all 0.3s ease-out;
}

.bar {
	background-color: #2c3e50;
	width: 30px;
	height: 4px;
	border-radius: 5px;
	right: 15px;
	top: 18px;
}

.first {
	position: absolute;
	-webkit-transition: all 0.2s ease-out;
}

.first.active {
	margin-top: 10px;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: all 0.2s ease-out;
	-webkit-transition-delay: .4s;
}

.second {
	margin-top: 10px;
	position: absolute;
	-webkit-transition: all 0.2s ease-out;
}

.second.active {
	opacity: 0;
	margin-top: 10px;
	-webkit-transition: all 0.2s ease-out;
	-webkit-transition-delay: .4s;
}

.third {
	margin-top: 20px;
	position: absolute;
	-webkit-transition: all 0.2s ease-out;
}

.third.active {
	margin-top: 10px;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transition: all 0.2s ease-out;
	-webkit-transition-delay: .4s;
}