長らく放置していましたが、jQueryでスライドメニューをつくるのを書いておきたいと思います。
Sidrライブラリはここからダウンロードします。
スクリプト本体とスタイルシートを使いますので適当なディレクトリに展開しておきます。
タッチ操作のjQueryプラグインもダウンロードし、同様に適当なディレクトリにコピーします。
jQuery本体はCDNを利用しますのでダウンロードしません。
スポンサーリンク
実際に使用するのは、
- jquery.touchwipe.min.js<\li>
- jquery.sidr.min.js
- jquery.sidr.light.css
の3つです。
サンプルソースコードは以下の通り。サンプルはこちら
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>スライドメニュー|Slide Menu</title> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <script src="js/jquery.touchwipe.min.js"></script> <script src="./jquery.sidr.min.js"></script> <link rel="stylesheet" type="text/css" href="./stylesheets/jquery.sidr.light.css" media="all"> </head> <body> <a class="navi_btn" href="#sidr">メニューを開く</a> <a class="navi_btn" href="#sidr" style="display: none;">メニューを閉じる</a> <br/><br/> →右へスワイプ(メニューを開く)<br/> <br/> ←左へスワイプ(メニューを閉じる) <nav id="sidr"> <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4</a></li> <li><a href="#">Menu5</a></li> </ul> </nav> <script src="./js/slide.js"></script> <?php include_once 'analyticstracking.php' ?> </body> </html>
slide.js
$(document).ready(function() { $('.navi_btn').sidr({ onOpen: function() { $('.navi_btn').toggle(); }, onClose: function() { $('.navi_btn').toggle(); } }); $('#sidr ul li').click(function() { $.sidr('close', 'sidr'); }); // スワイプ動作 $(window).touchwipe({ wipeLeft: function() { // Close $.sidr('close', 'sidr'); }, wipeRight: function() { // Open $.sidr('open', 'sidr'); }, preventDefaultEvents: false }); });
※以前書いたものはAndroidで反応無かったため、コード書き足しました。
※2 表示が狂う事があったのでコード修正しました(2014-02-20 21:55)
- 投稿タグ
- html, javascript, jQuery, slide
最近のコメント