[해피CGI][cgimall] Slideout

안녕하세요 모바일에서 사용하면 괜찮은 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 문서가 있으니 필요하시면 참고 하시기 바랍니다.