코드랩 레퍼런스
Menu - hamburger Style1 본문
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