햄버거메뉴 애니메이션 주기

모바일에서 많이 사용하는 메뉴아이콘 일명 햄버거


애니메이션 효과를 줘보자 


예제 : https://codepen.io/lovejin90/pen/REoZNE




소스코드

	
	$(function(){
	  $('.menu-box .menu-ui').click(function(){
		$(this).toggleClass('active');  
	  });
	});
	.menu-box .menu-ui,
	.menu-box .menu-ui span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.menu-box .menu-ui {
		position: relative;
		width: 25px;
		height: 25px;
		z-index: 4;
	}

	.menu-box .menu-ui span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #000000;
		border-radius: 4px;
	}

	.menu-box .menu-ui span.active{
		background-color: #ffffff;
	}

	.menu-box .menu-ui span:nth-of-type(1) {
		top: 0;
	}

	.menu-box .menu-ui span:nth-of-type(2) {
		top: 9px;
	}

	.menu-box .menu-ui span:nth-of-type(3) {
		bottom: 4px;
	}

	.menu-box .menu-ui.active span:nth-of-type(1) {
		-webkit-transform : translateY(10px) rotate(-45deg);
		transform : translateY(10px) rotate(-45deg);
	}
	.menu-box .menu-ui.active span:nth-of-type(2) {
		left : 50%;
		opacity : 0;
		-webkit-animation : active-menu-bar05 .8s forwards;
		animation : active-menu-bar05 .8s forwards;
	}
	.menu-box .menu-ui.active span:nth-of-type(3) {
		-webkit-transform : translateY(-9px) rotate(45deg);
		transform : translateY(-9px) rotate(45deg);
	}


댓글(0)