반응형UI: 사이드바
이 부분은 material 가이드라인: 반응형 UI와 material 가이드라인: UI 구조를 참고하였습니다.
주요 메뉴을 표시할 왼쪽 사이드바와 글의 종류에 따라 적절한 도구를 보여줄 오른쪽 사이드바로 나눕니다.
모바일
모바일 UI에서는 화면이 좁기 때문에 두 사이드바 모두 버튼을 눌러야 활성화 됩니다. 두 사이드바 모두 본문을 덮는 형태로 등장합니다.
태블릿
오른쪽 사이드바는 활성 상태로 고정되어 있습니다. 본문 중 컨텐츠 요소를 밀어내는 형태입니다. 열거나 닫는 버튼은 지원하지 않습니다. 왼쪽 사이드바는 메뉴버튼을 누르면 본문을 덮는 형태로 활성화됩니다.
데스크톱
양쪽 사이드바 모두 활성화되어있는 상태로 시작합니다. 두 사이드바 모두 밀어내는 형태로 활성화 되어 있습니다.
LESS/CSS
사이드바를 구현할 때는 CSS와 자바스크립트의 도움이 필요합니다.
상단 네비게이션 바
화면 크기가 변하면 둘의 높이가 뒤바뀝니다. 저번 포스팅 내용에 추가로 z-index옵션을 추가합니다.
nav {
/* ... 네비게이션 속성 ... */
z-index: 10;
}
미디어쿼리
사이드바 변화의 분기점인 태블릿PC와 데스크톱의 화면 크기를 등록합니다.
@view-tablet: ~"(min-width: 600px)";
@view-medium: ~"(min-width: 960px)";
본문
본문이 들어갈 <main>태그의 내용은 화면의 크기와 사이드바 활성 유무에 따라 여백을 조정해야 합니다.
main {
padding: 0;
&.left-sidebar-active {padding-left: 264px}
&.right-sidebar-active {padding-right: 264px}
}
jQuery를 사용해서 <main>태그에 .left-sidebar-active나 .right-sidebar-active 클래스를 붙이게 됩니다.
사이드바 공통
aside {
position: fixed;
top: 0; bottom: 0;
z-index: 999;
transition: all .2s;
&.overlay {
display: none;
left: 0; right: 0;
background: RGBA(0,0,0,.4);
z-index: 990;
}
}
모바일이나 태블릿에서 사이드바를 활성화 하면 다른 요소들 보다 앞에 있어야 하기 때문에 z-index 값을 크게 했습니다. .overlay는 사이드바가 활성화 되었을 때 본문을 어둡게 합니다.
왼쪽 사이드바
#left-sidebar {
background: #FFF;
left: -264px;
width: 264px;
@media @view-medium {
padding-top: 64px;
z-index: 9;
}
&.active {
left: 0px;
}
}
오른쪽 사이드바
#right-sidebar {
display: none;
background: #FFF;
right: 0;
width: 264px;
z-index: 9;
@media @view-tablet {
display: block;
padding-top: 64px;
}
}
스크립트
사이드바를 제어해야 하는 경우는,
- 처음 문서를 로드했을 때
- 브라우저 크기가 바뀔 때
.btn,.left-sidebar클래스가 있는 버튼을 눌렀을 때
의 세 가지 입니다. jQuery를 사용하기 때문에 이 스크립트는 항상 jQuery를 불러온 뒤에 불러와야 합니다.
var $document = $(document);
var $window = $(window);
var $main = $('main');
var $leftSidebar = $('#left-sidebar')
var $leftSidebarOverlay = $('#left-sidebar-overlay')
jQuery에서 DOM, 그러니까 선택자를 이용해서 뭘 찾을 때마다 자원을 많이 잡아먹는다고 하더라라고요. 그래서 여러번 부를만한 요소들을 전역변수로 만들었습니다.
처음 문서를 로드할 때
$document.ready(function() {
if ($window.width() > 960 ) {
$leftSidebar.addClass('active');
$main.addClass('left-active');
$main.addClass('right-active');
} else if($window.width() > 600) {
$main.addClass('right-active');
} else {
$leftSidebar.removeClass('active');
$main.removeClass('left-active');
$main.removeClass('right-active');
}
});
화면 크기에 따라 사이드바를 각각 다른 방식으로 초기화 시켜줘야 합니다. 클래스를 더하거나 빼는 방식으로 구현했습니다.
브라우저 크기가 바뀔 때
$window.resize(function() {
if ($window.width() > 960 ) {
$leftSidebar.addClass('active');
$leftSidebarOverlay.hide(0);
$main.addClass('left-sidebar-active');
$main.addClass('right-sidebar-active');
} else if($window.width() > 600) {
$main.addClass('right-sidebar-active');
if ($leftSidebar.hasClass('active')) $leftSidebarOverlay.show(0);
} else {
if ($leftSidebar.hasClass('active')) $leftSidebarOverlay.show(0);
$main.removeClass('left-sidebar-active');
$main.removeClass('right-sidebar-active');
}
});
화면 크기를 바꿀 때, 앞서 처음 문서를 로드할 때의 스크립트에 추가로 사이드바를 어둡게 만드는 요소를 숨기거나 보이게 합니다.
버튼을 클릭할 때
$('.btn.left-sidebar').click(function() {
$leftSidebar.toggleClass('active');
if ($window.width() > 960 ) {
$('#left-sidebar-overlay').hide(0);
$main.toggleClass('left-sidebar-active');
} else {
$('#left-sidebar-overlay').fadeToggle(200);
$main.removeClass('left-sidebar-active');
}
});
.btn클래스와 .left-sidebar를 함께 가지고 있는 요소를 클릭했을 때의 동작입니다. Toggle을 이용해서 간단하게 만들 수 있습니다.
php
네비게이션 바의 메뉴 버튼에 클래스를 추가합니다.
<i class="material-icons btn left-sidebar">menu</i>
클래스를 추가하여 메뉴버튼이 자바스크립트가 왼쪽 사이드바를 움직이는 버튼으로 인식하게 합니다.
사이드바는 어두운 배경, 오른쪽 사이드바와 왼쪽 사이드로 구성합니다.
<aside id="left-sidebar-overlay" class="overlay btn left-sidebar"></aside>
<aside id="left-sidebar" class="dp1">왼쪽 사이드 메뉴</aside>
<aside id="right-sidebar" class="dp1">오른쪽 사이드 메뉴</aside>
결과물
왼쪽부터 데스크톱 / 태블릿 / 모바일입니다. 크롬 개발자도구를 이용해서 찍은 스크린샷입니다.
상단은 초기화면, 하단은 메뉴버튼을 눌렀을 때의 모습입니다.
모종의 퀘스트가 생겨서 메테리얼 디자인과 워드프레스 공부는 잠깐 쉬겠습니다. 간만에 파이썬을 만져야겠군요.