코드랩 레퍼런스

Menu - hamburger Style1 본문

Menu - hamburger Style1

webstoryboy 2018.01.31 20:20

See the Pen Menu1 by Webstoryboy (@webstoryboy) on CodePen.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Menu</title>
	<style>
		* {padding: 0; margin: 0;}
		body {height:100vh; background:#3f51b5;}
		.table {
			display:table;
			width: 100%; height: 100%;
		}
		.icon-wrapper {
			display: table-cell;
			text-align: center;
			vertical-align: middle;
		}
		.icon {
			position: relative;
			width: 60px; height: 50px;
			display: inline-block;
			cursor: pointer;
		}
		.icon .bar {
			width: 60px; height: 5px;
			background-color: #fff;
			margin: 5px 0;
			position: absolute;
		}
		.icon .bar.one {
			top:0; left;0;
		}
		.icon .bar.two {
			top: 10px; left: 0;
		}
		.icon .bar.three {
			top: 20px; left: 0;
		}
		.icon .bar.one.active {
			animation: one 1s forwards;
		}
		.icon .bar.one.notActive {
			animation: one-reverse 1s forwards;
		}
		.icon .bar.two.active {
			animation: two 1s forwards;
		}
		.icon .bar.two.notActive {
			animation: two-reverse 1s forwards;
		}
		.icon .bar.three.active {
			animation: three 1s forwards;
		}
		.icon .bar.three.notActive {
			animation: three-reverse 1s forwards;
		}
		@keyframes one {
			0% {top:0;}
			30% {top:-5px}
			60% {top:10px}
			80% {transform: rotate(0)}
			100% {top:10px; transform: rotate(45deg);}
		}
		@keyframes one-reverse {
			0% {top:10px; transform: rotate(45deg);}
			30% {transform: rotate(0deg);}
			60% {top:10px}
			80% {top:-5px}
			100% {top:0px}
		}
		@keyframes two {
			0% {opacity:1;}
			80% {opacity:1;}
			100% {opacity:0;}
		}
		@keyframes two-reverse {
			0% {opacity:0;}
			70% {opacity:1;}
			100% {opacity:1;}
		}
		@keyframes three {
			0% {top: 20px;}
			30% {top:25px;}
			60% {top:10px;}
			80% {transform: rotate(0)}
			100% {top:10px; transform: rotate(-45deg);}
		}
		@keyframes three-reverse {
			0% {top:10px; transform: rotate(-45deg);}
			30% {transform: rotate(0)}
			60% {top:10px;}
			80% {top:25px;}
			100% {top:20px;}
		}
	</style>
</head>
<body>
	<div class="table">
		<div class="icon-wrapper">
			<div class="icon">
				<div class="bar one"></div>
				<div class="bar two"></div>
				<div class="bar three"></div>
			</div>
		</div>
	</div>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<script>
		$(".icon").click(animation);

		function animation(){
			if($(".icon .bar").hasClass("active")){
				$(".icon .bar").removeClass("active");
				$(".icon .bar").addClass("notActive");
			} else {
				$(".icon .bar").removeClass("notActive");
				$(".icon .bar").addClass("active");
			}
		}
	</script>
</body>
</html>


Share

Ad

Comments
댓글쓰기 폼