ご無沙汰しております。
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-->
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; }
オプション例
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, //スワイプを有効化