<!DOCTYPE html>
<html>
<head>
	<title>page</title>
	 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="1.page.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>

	<div class="hamburger">
		<span ></span>
		<span></span>
		<span></span>
		<p>HAMBURGER MENU</p>
	</div>

	<div class="doner">
		<span></span>
		<span></span>
		<span></span>
		<p>DONER MENU</p>
	</div>

</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Chakra+Petch:600');
body{
	margin: 50px;
	padding: 0;
	background: #262626;
	font-family: 'Chakra Petch', sans-serif;
	font-size: 36px;
}
.hamburger{
	width: 300px;
	height:270px;
	position: absolute;
	top:40%;
	left:25%;
	transform: translateY(-40%);
}
.hamburger span{
	position: absolute;
	width: 300px;
	height: 50px;
	background-color: white;
}
.hamburger span:nth-child(1){
	top: 0px;
  transition: .5s
}
.hamburger span:nth-child(2){
	top:100px;
	transition: .1s;
}
.hamburger span:nth-child(3){
	top: 200px;
  transition: .5s
}
.hamburger:hover span:nth-child(1){
	position: absolute;
	transform: rotate(45deg) translate(80px,80px);
	transition: 1s ease-in-out;
}
.hamburger:hover span:nth-child(2){
	opacity: 0;
}
.hamburger:hover span:nth-child(3){
	position: absolute;
	transform: rotate(315deg) translate(50px,-70px);
	transition: 1s ease-in-out;
}
p{
	position: absolute;
	bottom: -200px;
	color: darkorange;
	text-align: center;
	width: 200px;
	margin-left: 40px;
}

.doner{
	width: 300px;
	height:270px;
	position: absolute;
	top:40%;
	left:60%;
	transform: translateY(-40%);
}
.doner span{
	height: 50px;
	width: 300px;
	background-color: white;
	position: absolute;
}
.doner span:nth-child(1){
	top: 0px;
	width: 300px;
  transition: .5s
}
.doner span:nth-child(2){
	top: 100px;
	width: 200px;
	left: 50%;
	transform: translateX(-50%);
	transition: 1s;
}
.doner span:nth-child(3){
	top: 200px;
	width: 100px;
	left: 50%;
	transform: translateX(-50%);
  transition: .5s
}
.doner:hover span:nth-child(1){
	position: absolute;
	transform: rotate(45deg) translate(80px,80px);
	transition: 1s ease-in-out;
}
.doner:hover span:nth-child(2){
	opacity: 0;
	transform: rotate(90deg) translateY(110px) scaleX(2);

}
.doner:hover span:nth-child(3){
	position: absolute;
	transform: rotate(-45deg) translate(-55px,-180px);
	transition: 1s ease-in-out;
	width: 300px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.