움직이는 햄버거 메뉴 버튼 만들기

 

 

 

모바일 메뉴에서 빼놓을 수 없는 햄버거 버튼에 마우스를 올리거나 클릭 시 X자 형태의 닫힘 형태로 transform 시켜서 닫힘 버튼을 만들 수 있습니다.

 

가장 좋은 방법은 샘플 소스를 읽어가는 방법이겠죠?

하단에 html, css, jquery 소스를 예시로 적고 간략한 설명을 주석으로 달아보겠습니다.

​

​

예시) html 작성

<a class="menu" href="#"> //메뉴 클래스에 빈 span을 3개 그려넣습니다.
  <span></span>
  <span></span>
  <span></span>
</a>

 

 

예시) css 작성

/*기본 css*/
.menu,
.menu span {
display : inline-block;
transition : all 0.4s;
box-sizing : border-box;}

.menu {
position : relative;
width : 44px;
height : 44px;}

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

.menu span:nth-child(1) {
top : 0;}

.menu span:nth-child(2) {
top : 20px;}

.menu span:nth-child(3) {
bottom : 0;}

/*마우스를 올렸을 때 움직임 관련 css*/
.menu.active span:nth-child(1) {
-webkit-transform : translateY(20px) rotate(-45deg);
transform : translateY(20px) rotate(-45deg); //y축으로 20px 이동하고 -45도 돌린다}

.menu.active span:nth-child(2) {
opacity : 0; //2번째 줄에 마우스를 올렸을 때 투명해져라}

.menu.active span:nth-child(3) {
-webkit-transform : translateY(-20px) rotate(45deg);
transform : translateY(-20px) rotate(45deg); //y축으로 -20px 이동하고 45도 돌린다}

 

 

예시) jQuery 작성

<script>
    $('.menu').hover(function(){
       $(this).toggleClass('active'); //마우스를 menu 클래스에 올렸을 때 active클래스를 토글해라
    });
</script>