css 모바일 버거 메뉴 버튼 만들기

이번엔 모바일 웹에서 감춰져 있는 사이드 메뉴를 열기 위해 주로 사용하는 메뉴 버튼(버거)을 만들어 보겠습니다.

 

위 이미지 처럼 모바일 웹에 자주 등장하는 이것을 이미지를 사용하지 않고 css만으로 만들 수 있습니다.

 

HTML

먼저 html 코드 입니다.

저는 주로 메뉴 버튼의 몸체가 될 span.burgur 한개만 만들어 두고 

가상 클래스 burgur:before, burgur:after 등 을 사용하여 코딩하는 편이지만 직관성을 위해 윗줄, 아랫줄을 추가했습니다.

<div class="container">
 <button class="slide-open" id="slide-open"> //예제를 위한 메뉴버튼을 담을 버튼
   <span class="burgur" id="burgur">  //버거메뉴 버튼 가운데 라인
     <span class="top-line"></span>   //버거메뉴 버튼 윗 라인
     <span class="bot-line"></span>   //버거메뉴 버튼 아랫 라인
   </span>
   slide open
 </button> 

 

CSS

예제 버튼의 css입니다.

.slide-open{
  position:relative; //메뉴버튼은 absolute로 자리를 잡기 위해 부모요소에 relative룰 줌
  top:30px;       
  width:150px;
  height:50px;
  background-color:#ffffff;
  cursor:pointer;
  text-align:center;
}

 

 

아래는 메뉴 버거 버튼의 css

 

 

.burgur{ //몸체 (가운데 라인)
    left: 15px;
    top: 23px;
    position: absolute;  //부모요소 버튼의 영역안에서 자유롭게 위치
    width: 20px;         //메뉴버튼의 가로폭
    height: 2px;         //메뉴버튼 한줄의 높이
    background: #000000; //검정색
}
.burgur .top-line{ //윗 라인
    width: 20px;
    height: 2px;
    background-color: #000000;
    bottom: -5px; //가운데 라인을 기준으로 위로 5px만큼 떨어짐
    position: absolute; 
    left: 0;
    -webkit-transition:  -webkit-transform .3s;
    transition: transform .3s; 
    //transition - 지정한 속성 변경이 일어날 때 애니메이션 속도를 지정한 속도만큼 조절
    //transform이 0.3초 에 걸쳐 완료
}
.burgur .bot-line { //아랫 라인
    width: 20px;
    height: 2px;
    background-color: #000000;
    top: -5px;  //가운데 라인을 기준으로 아래로 5px만큼 떨어짐
    position: absolute;
    left: 0;
    -webkit-transition:  -webkit-transform .3s;
    transition: transform .3s;
}

 

 

위처럼 css를 적용하면 아래 이미지와 같이 나옵니다.

슬라이드 메뉴 버튼

 

이제 메뉴 버튼을 클릭 했을 때 메뉴버튼의 모양을 변경시키기 위한 css를 작성합니다.

(메뉴버튼을 클릭했을 때  여부를 판단하기 위해 X모양으로 변경해보겠습니다.)

.burgur.on { //클릭이벤트가 발생했을 때 on클래스를 추가하여 css를 변경
    width: 0; //가운데 라인을 없애기 위해 가로값을 0을 주어 감춤
}

//translateY - 해당 요소의 y축을 지정한 만큼 이동
//rotate     - 요소를 지정한 만큼 회전 

.burgur.on .bot-line {
    -webkit-transform: translateY(5px) rotate(135deg);
    transform: translateY(5px) rotate(135deg);
    
}
.burgur.on .top-line{
    -webkit-transform: translateY(-5px) rotate(-135deg);
    transform: translateY(-5px) rotate(-135deg);
}

y축을 변경하는 이유는 rotate로 요소가 회전을 하는 만큼 위치가 조금씩 변화하기 때문입니다.

top-line, bot-line에는 transform에 대한 transition이 걸려있기 때문에 0.3초 동안에 위치와 회전이 이뤄집니다.

 

jQuery

- 클릭 이벤트가 발생했을 때 메뉴버튼에 on클래스를 추가하여 css를 변경되도록 합니다.

$(function(){

   $("#slide-open").click(function(){
   	
    if($("#burgur").hasClass('on')){
    //메뉴버튼이 "on" 클래스를 포함할 경우 "on"클래스를 제거
      $("#burgur").removeClass('on');
      
    }else{
    //메뉴버튼이 "on" 클래스를 포함하지 않을 경우 "on"클래스를 추가
      $("#burgur").addClass('on');
      
    }   
    
   });
});

위와 같이 이벤트까지 주게 되면 클릭 할 때 마다 X 모양과 버거 모양을 반복합니다.

 

- 저는 역동적인 느낌이 들기 위해 회전각을 크게 주었지만, 작게 움직이길 원하시면 rotate의 deg값을 변경하면 됩니다.

 

아래에서 위 코드의 완성 예시를 볼 수 있습니다. (버튼을 클릭 해주세요!)

 

 

See the Pen VwaqwJd by MUZI (@muzimuzi) on CodePen.