사이드바 외부클릭시 숨기기

웹페이지에서 사이드바 바깥쪽을 클릭하면 사이드바가 사라지게 하는 기능을 구현해보자. 

특히 모바일 사용자가 대다수를 차지하는 홈페이지에서는 UI 면에서 안그래도 좁은 사이드바에 X 버튼 혹은 닫기 버튼을 우겨넣을 필요가 없으니 네비게이션 본연의 기능에 집중할 수 있어 좋다.

UX 면에서도 사용자가 닫기버튼을 누르기 위해 핸드폰 화면 최상단까지 손가락을 움직이는 수고를 덜어주는 장점이 있고, 

모바일 앱에서 쓰이는 네비게이션(예: 안드로이드에서 쓰이는 Navigation Drawer)에서는 바깥쪽을 터치해 드로어를 닫는 기능이 기본적으로 포함되어 있으므로 경험이 있는 사용자라면 따로 설명이 필요없는 익숙한 기능이라 구현해놓으면 좋다.

뒤집어 말하면 사용자는 하던대로 사이드바 바깥쪽을 클릭했는데 닫히지 않으면 짜증이 날 수 있는 가능성이 있다는 말이다. 

현재 이 블로그에 구현해 놓았으므로 창 크기를 줄이거나 모바일로 접속하면 어떤 기능인지 확인해볼 수 있다. 

( 최근 스킨이 업데이트되어 변경했는데, 티스토리 기본스킨에 이 기능이 포함됐다. )

HTML

기본구조는 이렇다.

• 토글형식의 네비게이션 #sidebar
• 토글 기능의 #sidebarCollapse 버튼
• 기능구현을 위한 .overlay

<div id="wrap">
    <nav id="sidebar"></nav>
    <button id="sidebarCollapse" /> 
    <div class="overlay"></div>
</div>

CSS

#sidebar의 스타일은 아래와 같다. 

position: fixed; 로 위치가 고정되어 있으며 left: -250px; 로 숨어있다가 토글버튼을 누르면 active 클래스가 붙어 left: 0; 으로 바뀌며 화면에 등장한다. 

#sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    left: -250px;
    height: 100%;
    z-index: 999;
    background: #333;
    color: #fff;
    transition: all 0.3s;
}

#sidebar.active {
    left: 0;
}

여기서 눈여겨보아야 할 것은 z-index 속성이다. 

z-index에 대한 자세한 설명은 링크 참조. 

쉽게 생각하면 파워포인트의 '맨 앞으로', '맨 뒤로'와 비슷하다. 숫자가 크면 앞으로 나오고 작으면 뒤로 간다.

현재 #sidebar에는 999값을 줬다.

.overlay의 스타일을 보자.

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    display: none;
}

display:none;로 평소에는 보이지 않지만 width와 height를 보건대 페이지 전체를 커버하는 것을 볼 수 있다. 

하지만 z-index 값은 998로 #sidebar의 z-index보다 밸류가 1 작기 때문에, 페이지 전체를 커버하되 사이드바 부분은 제외되는 것이다.

background는 rgba를 사용해 반투명한 검정색을 띠게 하였다.

modal 등을 띄울 때 뒷 배경이 이런 색으로 바뀌는 것을 많이들 보았을 것이다.

jQuery

토글기능의 #sidebarCollapse 버튼 부분이다. 

1. 버튼을 클릭하면 
2. #sidebar에 active 클래스를 추가한다. css에 선언된대로 left: -250px; -> left: 0; 으로 변경되어 숨어있던 것이 나타나게 된다.
3. display:none; 상태인 .overlay를 페이드인했다. (사이드바 처리와 같이, display: block; 을 미리 css에 선언해놓아도 무방)

$('#sidebarCollapse').on('click', function () {
    $('#sidebar').addClass('active');
    $('.overlay').fadeIn();
});

따로 다른 엘리먼트에 z-index를 추가하지 않았다면 사이드바를 제외한 화면 최상단 스택에 .overlay가 위치한다. 그러므로 #sidebar를 제외한 어느 부분이든 클릭하면 .overlay가 닿게 된다. 

#sidebar의 z-index는 999

.overlay의 z-index는 998 이므로 

사이드바의 메뉴를 클릭하고 조작하는 것에는 아무런 영향을 받지 않는다.

이제 .overlay를 클릭하면 사이드바에서 active 클래스를 다시 제거하고( left: 0 -> left: -250px 로 재변경될 것이다) 페이드 아웃으로 다시 display: none; 상태로 전환해 영향을 끼치지 않도록 한다.

$('.overlay').on('click', function () {
    $('#sidebar').removeClass('active');
    $('.overlay').fadeOut();
});

Output

위는 기본적인 원리에 대한 예제지만 모달과 같은 곳에서 동일한 방법으로 작동하므로 활용빈도가 높다. 아래는 작동 예.