長らく放置していましたが、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)

10日でおぼえるJavaScript入門教室 第3版 (10日でおぼえるシリーズ)
投稿タグ
, , ,