[Jquery] 제이쿼리를 이용해 슬라이드 메뉴 만들기

이 블로그 우측 상단의 버튼을 누르면 우측에 슬라이드 메뉴가 튀어나온다. 사실 여기까지 구현하는데는 정말 간단하다. 특정 클래스의 엘리먼트를 클릭했을때 슬라이드 메뉴에 클래스를 하나 생성하는 것만으로 구현이 가능하다.

제이쿼리의 경우 모바일에서 동작할 때 프리징이 생기는 경우가 많다. 특히 많은 엘리먼트가 움직여야 하는 경우 끊김 현상은 더욱 심각해 진다. 따라서 만약 슬라이드 메뉴안에 엘리먼트가 많이 존재한다면 과감하게 애니메이션 효과를 없애버리는 것을 추천한다. (나같은 경우는 편법을 사용한다. 애니메이션이 없는 슬라이드 메뉴는 못 견디겠다)

슬라이드 메뉴 만들기

간단하게 슬라이드 메뉴를 만들어 보자.

먼저 HTML을 작성한다.

<div id="menu">
    <div class="close"></div>
</div>
<div class="btn">
</div>

그다음 CSS를 작성한다.

.btn {
  width : 50px;
  height : 50px;
  position : absolute;
  right : 0px;
  top : 0px;
  z-index : 1;
  background-image : url("http://s1.daumcdn.net/cfs.tistory/custom/blog/204/2048858/skin/images/menu.png");
  background-size : 50%;
  background-repeat : no-repeat;
  background-position : center;
  cursor : pointer;
}

.close {
  width : 50px;
  height : 50px;
  position : absolute;
  right : 0px;
  top : 0px;
  z-index : 1;
  background-image : url("http://s1.daumcdn.net/cfs.tistory/custom/blog/204/2048858/skin/images/close.png");
  background-size : 50%;
  background-repeat : no-repeat;
  background-position : center;
  cursor : pointer;
}

#menu {
  width : 150px;
  height : 100%;
  position : fixed;
  top : 0px;
  right : -152px;
  z-index : 10;
  border : 1px solid #c9c9c9;
  background-color : white;
  text-align : center;
  transition: All 0.2s ease; 
  	-webkit-transition: All 0.2s ease; 
  	-moz-transition: All 0.2s ease; 
  	-o-transition: All 0.2s ease; 
}

#menu.open {
  right : 0px;
}

다음은 제이쿼리를 작성한다.

$(".btn").click(function() {
  $("#menu").addClass("open");
});

$(".close").click(function() {
  $("#menu").removeClass("open");
});

완성!

하지만 위의 방법만으로 구현하면 한가지 치명적인 단점이 생긴다. 요즘 유저들은 UX적으로 모바일 앱에 길들어져 있기 때문에 메뉴를 닫기 위해서 뒤로가기 버튼을 습관적으로 누르게 되는데 이러한 방법으로 구현할 경우 뒤로가기 버튼을 눌렀을때 현재 페이지를 벗어나게 되어 불편함을 유발한다.

뒤로가기 기능 만들기

어렵게 생각하지 말고 일단 생각을 해보자 브라우저에서 뒤로가기를 누르면 이전페이지로 이동한다. 그렇다면 메뉴 버튼을 클릭하여 슬라이드 메뉴가 나타났을때 페이지가 전환되는 것과 같은 효과를 줘서 뒤로가기를 눌렀을때 페이지가 벗어나지 않게 막으면 될것 같다. 그리고 부가적으로 슬라이드 메뉴 영역 밖을 누르면 슬라이드 메뉴가 자동으로 닫히는 기능까지 만들어 보자.

먼저 HTML을 작성한다.

<div class="btn"> // 메뉴를 여는 버튼이다.
</div>
<div onclick="history.back();" class="page_cover"></div> // 메뉴 영역 밖을 누르면 닫히는 기능을 가진다.
<div id="menu"> // 메뉴 영역
    <div onclick="history.back();" class="close"></div> // 닫기 버튼이다. 뒤로가기 버튼과 같은 기능을 가진다.
</div>

다음은 CSS를 작성한다.

html.open {
    overflow: hidden;
} // 메뉴가 열렸을때 본문이 스크롤 되지 않는다.

.btn {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 1;
  background-image: url("http://s1.daumcdn.net/cfs.tistory/custom/blog/204/2048858/skin/images/menu.png");
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
} // 메뉴 버튼

.close {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0px;
  top: 0px;
  background-image: url("http://s1.daumcdn.net/cfs.tistory/custom/blog/204/2048858/skin/images/close.png");
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
} // 닫기 버튼

#menu {
  width: 150px;
  height: 100%;
  position: fixed;
  top: 0px;
  right: -152px;
  z-index: 10;
  border: 1px solid #c9c9c9;
  background-color: white;
  text-align: center;
  transition: All 0.2s ease;
  -webkit-transition: All 0.2s ease;
  -moz-transition: All 0.2s ease;
  -o-transition: All 0.2s ease;
} // 메뉴 영역

#menu.open {
  right: 0px;
}
.page_cover.open {
	display: block;
}

.page_cover {
	width: 100%;
	height: 100%;
	position: fixed;
    top: 0px;
    left: 0px;
	background-color: rgba(0,0,0,0.4);
	z-index: 4;
	display: none;
}

다음은 제이쿼리를 작성한다. 

$(".btn").click(function () {
    $("#menu,.page_cover,html").addClass("open"); // 메뉴 버튼을 눌렀을때 메뉴, 커버, html에 open 클래스를 추가해서 효과를 준다.
    window.location.hash = "#open"; // 페이지가 이동한것 처럼 URL 뒤에 #를 추가해 준다.
});

window.onhashchange = function () {
    if (location.hash != "#open") { // URL에 #가 있을 경우 아래 명령을 실행한다.
        $("#menu,.page_cover,html").removeClass("open"); // open 클래스를 지워 원래대로 돌린다.
    }
};

완성! 아주 간단한다.

이해가 안된다면 이 소스를 복사해서 붙여넣으면 된다. 간단해졌다.

완성된 기능을 확인해 보자.

See the Pen 슬라이드 메뉴 만들기 by biggerbig (@biggerbig) on CodePen.