スマホに最適なスワイプメニューを実装できる「Snap.js」の使い方
ご無沙汰しております。
Webデザイナーの菅です。
Facebookのように横から展開するメニューを実装できるjQueryプラグイン「sidr」の使い方
以前、上記の記事でスマホ向けの開くメニューをご紹介しましたが、
そちらと似たような、スワイプ可能なメニューを実装できるjsを見つけましたのでオススメさせていただきます。
まずは、デモをご覧ください。
サンプルデモ・ダウンロードはこちら
非常にスムーズにスライドしますよね！
ドラッグやスマホのスワイプでも開くことができる上に、
ボタン以外のエリアをクリックしても元にもどるので便利です。
最大のメリットは、jQuery等のライブラリが無くても設置できる点ですね。
CSS3をベースにしているので、動きが滑らかなのも良いです。
IE9以前のブラウザは機能が制限されますが、
最近のモダンブラウザなら問題はなさそうです。
オプションも用意されているので、カスタマイズ性も高そう。
おすすめなので、サンプルをご参考に使ってみてください。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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--> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
* { 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; } |
オプション例
|
1 2 3 4 5 6 7 8 9 10 |
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, //スワイプを有効化 |
サンプルデモ・ダウンロードはこちら
配布サイト
https://github.com/jakiestfu/Snap.js/
Follow me!
