slidebars 활용하기

• 홈페이지

<!-- Slidebars -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="<c:url value='/js/slidebars/slidebars.min.css' />" />
<link rel="stylesheet" type="text/css" href="<c:url value='/js/slidebars/slidebars.custom.css' />" />
<script type="text/javascript" src="<c:url value='/js/slidebars/slidebars.min.js' />"></script>

snippet.javascript

<!-- Slidebars -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="<c:url value='/js/slidebars/slidebars.min.css' />" />
<script type="text/javascript" src="<c:url value='/js/slidebars/slidebars.min.js' />"></script>

snippet.javascript

<div canvas="container"></div>
<div off-canvas="id-1 left reveal"></div>
<div off-canvas="id-2 right shift"></div>
<div off-canvas="id-3 top overlay"></div>
<div off-canvas="id-4 bottom shift"></div>

아이디, 방향, 방법을 설정한다.

방향예는 left, right, top, bottom 가 있습니다.

방법에는 reveal, push, shift, overlay 가 있습니다.

시작시에 슬라이드바를 생성한다.

snippet.javascript

// slidebars init
controller = new slidebars();
controller.init();

슬라이드바를 토클한다.

snippet.javascript

controller.toggle('id-1');
$("<div>blahblasblah</div>").appendTo('#canvas1');

snippet.javascript

<link rel="stylesheet" type="text/css" href="<c:url value='/js/slidebars/slidebars.custom.css' />" />

snippet.css

[off-canvas]{
	background-color: #F7F7F0; /* Basic background color, overwrite this in your own css. */
	border: 1px solid #FFFFFF;
	color: RGBA(0,0,0,1)	
}
 
[off-canvas*=push]{
	z-index: 10;
}
 
[off-canvas*=left]{
	width: 500px;
}