안녕하세요 모바일에서 사용하면 괜찮은 jquery 입니다.
PC 에 사용해도 상관은 없지만 모바일에 더 잘 어울릴꺼 같아요 ^^;
기본적인 HTML 은 아래와 같은 구성을 가지고 있습니다.
<nav id="menu">
<header>
<h2>Menu</h2>
</header>
</nav>
<main id="panel">
<header>
<h2>Panel</h2>
</header>
</main>
스타일도 당연히 따라오겠죠 ^^
body {
width: 100%;
height: 100%;
}
.slideout-menu {
position: fixed;
top: 0;
bottom: 0;
width: 256px;
min-height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
z-index: 0;
display: none;
}
.slideout-menu-left {
left: 0;
}
.slideout-menu-right {
right: 0;
}
.slideout-panel {
position: relative;
z-index: 1;
will-change: transform;
background-color: #FFF; /* A background-color is required */
min-height: 100vh;
}
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
overflow: hidden;
}
.slideout-open .slideout-menu {
display: block;
}
구동하기 위한 스크립트도 당연히 있습니다.
<script src="dist/slideout.min.js"></script>
<script>
var slideout = new Slideout({
'panel': document.getElementById('panel'),
'menu': document.getElementById('menu'),
'padding': 256,
'tolerance': 70
});
// Toggle button
document.querySelector('.toggle-button').addEventListener('click', function() {
slideout.toggle();
});
</script>
압축파일 해제 하시면 test 폴더안에 index.html, index.right.html 2개가 있고 둘다 문제 없이 작동은 합니다.
그러나 index.html 은 개발자가 메뉴가 작동하는걸 보여주기 위해 강제로 2번 정도 메뉴가 움직이도록 해 두었네요.
소스 하단에 보시면 var runner = mocha.run(); 있는데요. 주석처리하시면 자동 메뉴 움직이는거 막을 수 있습니다.
참고하셔서 이쁜 모바일 사이트 만들어 보세요 ^^
https://github.com/Mango/slideout 에 접속하시면 옵션, 이벤트 들에 대한 API 문서가 있으니 필요하시면 참고 하시기 바랍니다.
|
