スマホに最適なスワイプメニューを実装できる「Snap.js」の使い方

ご無沙汰しております。
Webデザイナーの菅です。

Facebookのように横から展開するメニューを実装できるjQueryプラグイン「sidr」の使い方

以前、上記の記事でスマホ向けの開くメニューをご紹介しましたが、
そちらと似たような、スワイプ可能なメニューを実装できるjsを見つけましたのでオススメさせていただきます。

まずは、デモをご覧ください。

サンプルデモ・ダウンロードはこちら

非常にスムーズにスライドしますよね！
ドラッグやスマホのスワイプでも開くことができる上に、
ボタン以外のエリアをクリックしても元にもどるので便利です。

最大のメリットは、jQuery等のライブラリが無くても設置できる点ですね。
CSS3をベースにしているので、動きが滑らかなのも良いです。

IE9以前のブラウザは機能が制限されますが、
最近のモダンブラウザなら問題はなさそうです。

オプションも用意されているので、カスタマイズ性も高そう。
おすすめなので、サンプルをご参考に使ってみてください。

HTML

<div class="content" id="snap">
<h1>スマホライクなスワイプメニューを実装できる「Snap.js」デモ</h1>
<div class="box" id="drag">ここはドラッグ（スワイプ）できるよ</div>
<div class="box" data-snap-ignore="true">ここはドラッグ（スワイプ）できないよ</div>
<div class="box" id="close">ここをクリックで閉じるよ</div>
<div class="box" id="open-left">ここをクリックで左がひらくよ</div>
<div class="box" id="open-right">ここをクリックで右がひらくよ</div>
</div><!--//content-->
<div class="nav-wrap">
<div class="nav nav-left">
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</div><!--//nav-left-->
<div class="nav nav-right">
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</div><!--//nav-right-->
</div><!--//nav-wrap-->

<h1>スマホライクなスワイプメニューを実装できる「Snap.js」デモ</h1>

<div class="box" id="drag">ここはドラッグ（スワイプ）できるよ</div>

<div class="box" data-snap-ignore="true">ここはドラッグ（スワイプ）できないよ</div>

<div class="box" id="close">ここをクリックで閉じるよ</div>

<div class="box" id="open-left">ここをクリックで左がひらくよ</div>

<div class="box" id="open-right">ここをクリックで右がひらくよ</div>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</div>

CSS

* { padding: 0; margin: 0; list-style-type: none; }
html, body { width: 100%; height: 100%; overflow: hidden; }
.content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; padding-top: 20px; z-index: 2; overflow: auto; background: #fff; text-align: center; -webkit-overflow-scrolling: touch; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.box { width: 80%; background: #ccc; margin: 0 auto; padding: 20px; margin-top: 20px; text-align: center; }
.nav-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; background: #333; }
.nav { position: absolute; top: 0; right: auto; bottom: 0; left: auto; width: 265px; height: auto; overflow: auto; background: #333; color: #fff; -webkit-overflow-scrolling: touch; -webkit-transition: width 0.3s ease; -moz-transition: width 0.3s ease; -ms-transition: width 0.3s ease; -o-transition: width 0.3s ease; transition: width 0.3s ease; }
.nav li a { display: block; border-bottom: 1px solid #666; padding: 15px; font-weight: bold; text-decoration: none; color: #ccc; text-indent: 20px; }
.nav-left { left: 0; z-index: 1; }
.nav-right { right: 0; z-index: 1; }
.snapjs-left .nav-right, .snapjs-right .nav-left { display: none; }
.snapjs-expand-left .nav-left, .snapjs-expand-right .nav-right { width: 100%; }
.snapjs-right .nav-left { display: block; right: 0; left: auto; }

* { padding: 0; margin: 0; list-style-type: none; }

html, body { width: 100%; height: 100%; overflow: hidden; }

.content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; padding-top: 20px; z-index: 2; overflow: auto; background: #fff; text-align: center; -webkit-overflow-scrolling: touch; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.box { width: 80%; background: #ccc; margin: 0 auto; padding: 20px; margin-top: 20px; text-align: center; }

.nav-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; background: #333; }

.nav { position: absolute; top: 0; right: auto; bottom: 0; left: auto; width: 265px; height: auto; overflow: auto; background: #333; color: #fff; -webkit-overflow-scrolling: touch; -webkit-transition: width 0.3s ease; -moz-transition: width 0.3s ease; -ms-transition: width 0.3s ease; -o-transition: width 0.3s ease; transition: width 0.3s ease; }

.nav li a { display: block; border-bottom: 1px solid #666; padding: 15px; font-weight: bold; text-decoration: none; color: #ccc; text-indent: 20px; }

.nav-left { left: 0; z-index: 1; }

.nav-right { right: 0; z-index: 1; }

.snapjs-left .nav-right, .snapjs-right .nav-left { display: none; }

.snapjs-expand-left .nav-left, .snapjs-expand-right .nav-right { width: 100%; }

.snapjs-right .nav-left { display: block; right: 0; left: auto; }

オプション例

element: document.getElementById('snap'), //左右にスライドされる要素のID
dragger: document.getElementById('drag'), //左右にスライドするための使用される要素
disable: 'left' //右か左どちらか動かさないほうを指定できる
addBodyClasses: true, //開かれている側を示すためにbodyにクラスを追加する
transitionSpeed: 0.5, //スライドの開閉速度を指定
easing: 'ease', //イージングを指定
maxPosition: 266, //スライドさせる最大幅
minPosition: -266, //スライドさせる最小幅
tapToClose: true, //空白クリックで閉じる
touchToDrag: true, //スワイプを有効化