jquery hamberger menu (햄버거 메뉴)

여러가지 홈페이지에서 자주 사용되는 햄버거 메뉴

 

HTML

<div id="hamburgerWrap">
  <div class="icon">
    <span class="line top"></span>
	<span class="line middle"></span>
	<span class="line bottom"></span>
  </div>
</div>

 

CSS

#hamburgerWrap {
	width:100px;
	height:100px;
	position:relative;
	cursor: pointer;
}
.line {
	position: absolute;
	height: 5px;
	width:100%;
	background:#000;
	border-radius:5px;
	transition: all 0.35s;
}
.top {
	top:18%;
}
.middle {
	top:48%;
}
.bottom {
	top:78%;
}
.icon.active .top {
	transform:rotate(45deg);
	top:48%;
}
.icon.active .middle, .icon.active .bottom {
	transform:rotate(-45deg);
	top:48%;
}

 

js

$("#hamburgerWrap").click( function() {
   $(".icon").toggleClass("active");
});