css 모바일 슬라이드 메뉴 박스 만들기

이번엔 모바일 화면상에서 메뉴버튼을 클릭 시 좌측에서 우측으로 슬라이드하며 나오는 메뉴영역을 만들어 볼까 합니다.

슬라이드메뉴도 약간의 jQuery와 CSS만으로 만들 수 있습니다.

 

이전 글에 작성했던 모바일 메뉴의 burgur 메뉴버튼을 사용했습니다.

muzi-muzi.tistory.com/7

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

위 버튼을 클릭 시 모바일 메뉴가 나왔다가 사라지게 작성해봤습니다.

 

애니메이션에만 효과를 준 상태이기 때문에 슬라이드 메뉴리스트에 대한건 다음번에 다뤄보겠습니다.

 

이번 글에서는  완성된 코드를 먼저 올리겠습니다. (MUZIMUZI 우측의 메뉴 버튼을 클릭해주세요!)

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

 

 

 

먼저 간략한 html 입니다.

HTML

<div class="wrapper">
  <div class="container">
     <div class="head">
       <div class="slide-open" id="slide-open">
          <span class="burgur" id="burgur">
          <span class="top-line"></span>
          <span class="bot-line"></span>
       </span>
       </div>
      
       <div class="logo">MUZIMUZI</div>
     </div>
     <div class="body">
       <div class="content">
         컨텐츠
       </div>
       <div class="slide" id="slide">
         <div class="slide-title">
           슬라이드
         </div>
         <ul>
           <li>슬라이드 메뉴</li>
           <li>슬라이드 메뉴</li>
           <li>슬라이드 메뉴</li>
           <li>슬라이드 메뉴</li>
           <li>슬라이드 메뉴</li>
           <li>슬라이드 메뉴</li>
         </ul>
       </div>
     </div>
  </div> 
</div>

 

지금 부터는 CSS를 사용해 head 부터 차근차근 적용해 보겠습니다.

 

모바일 화면의 logo 영역입니다.

 

CSS

head 영역의 로고 영역에 대한 css입니다.

저는 직접 텍스트인 MUZIMUZI에 대한 css를 주었지만 간단하게 이미지로 대체해도 무방합니다.

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.wrapper{
  width:100%;
}
.container{
  width:100%;
  max-width:500px;           //테스트를 위해 높이를 500px로 고정
  margin:0 auto;
  border:1px solid #e1e1e1;
}
.head{
  width:100%;
  height:50px;
  border-bottom:1px solid #e1e1e1;
  position:relative;         //슬라이드 메뉴버튼을 absolute로 지정해주기 위한 부모요소 relative
}
.logo{                       //로고 텍스트의 css
  text-align:center;
  font-size:32px;
  font-style:italic;
  font-weight:800;
  padding-top:8px;
}
.body{                       //몸체 영역 클래스명은 임의로 작성
  height:400px;
  position:relative;         //슬라이드를 absolute로 배치 시키기위해 부모요소 relative
}
.content{
  height:100%;
  font-size:30px;
  display:flex;
  justify-content:center;
  align-items:center;
}

위 코드 까지의 결과물입니다.

모바일 예시 화면 

메뉴버튼은 position:absolute; 를 사용하여 우측에 배치 했습니다.

 

다음은 좌측 슬라이드 메뉴에 대한 CSS입니다.

화면의 가로폭만큼 메뉴 영역을 좌측으로 position 속성의 left 를 사용해 좌측으로 빼놓겠습니다.

.slide{
  width:100%;
  position:absolute;
  left:-100%;                    //좌측에 위치 시키기 위해 현 가로폭의 -100%만큼 왼쪽으로 이동
  top:0;                         //슬라이드 메뉴의 경우 화면에 꽉차게 해야 하는데
  right:0;                       //모바일 웹은 화면의 높이가 일정하지 않을 일이 많아
  bottom:0;                      //전,후,좌,우 전체 0을 주면 화면에 가득 차게 됩니다.
  
  -webkit-transition: left .3s;  //애니메이션 css 브라우저별로 작동시키기 위해 다 적어주는게 좋다
  -moz-transition: left .3s;     //left 속성에 대해 0.3초 동안 애니메이션 실행
  -ms-transition: left .3s;
  -o-transition: left .3s;
  transition: left .3s;
  background-color:#cccccc;
}
.slide-title{
  width:100%;
  height:100px;
  font-size:42px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-bottom:1px solid #e1e1e1;
}
.slide.on{
  left:0;
}
.slide ul li{
  display:inline-block;
  width:100%;
  padding:10px;
  border-bottom:1px solid #e1e1e1;
}

위 코드까지 실행한 상태입니다.

div.body에 relative가 걸려있기 때문에 화면 이 영역을 기준으로 화면을 확장합니다.

슬라이드 메뉴영역을 굳이 보이게 한 이유는 단순히 이 영역이 가려져 있을 뿐 메뉴박스가 움직이는 모양을 설명하기 위함입니다.

 

아래의 실행용 jQuery를 추가한 결과는 아래와 같습니다.

jQuery

$("#slide-open").click(function(){  //버튼 클릭 시

    if($("#burgur").hasClass('on')){ //메뉴가 X 상태일때
    
      $("#burgur").removeClass('on'); //메뉴 원복
      $("#slide").removeClass('on');  //슬라이드 메뉴 원복
     
    } else{
    
      $("#burgur").addClass('on');    //메뉴 3줄
      $("#slide").addClass('on');     //슬라이드 메뉴 감춤
     
    }
  });

 

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

 

위와 같이 실제로 메뉴 영역은 옆쪽에 있고, 버튼을 클릭했을 때 위치를 정상적으로 돌려주는 작업만 해주시면 됩니다.

 

이제 div.body 클래스에 overflow:hidden; 을 사용하여 영역 바깥으로 나가는 요소를 감춰주시면 

왼쪽에서 오른쪽으로 메뉴가 생성되는 듯하게 표현 됩니다.

 

완성된 코드는 글 초반 부에 작성해두었습니다.