jQuery Mobileでスライドメニューを作る

左右から開くスライドパネル、スライドメニューにアンカーリンクを使用するパターンを作成してみました。
スライドメニューのjQueryプラグインに関してはいくつかご紹介してきましたが、Andoroidの旧バージョンでも安定して動くとなると、やはりjQuery Mobileが安定してそうです。

デモページ

使い方

必要なファイルを読み込む。

jQueryライブラリとjQuery Mobileライブラリ、CSSを読み込みます。
下記はCDNを使用していますが、自分のサーバーにアップしたものを使いたい場合は、jQuery Mobileのサイトよりダウンロードして下さい。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

html

スライドさせる要素にはそれぞれdata-role=”panel”属性を付与します。
更に、右から開く要素にはid=”menu-right”、左から開く要素にはid=”menu-left”を付与しています

<div data-role="page" id="wrap">
	<div id="header" data-role="header">
		<a href="#menu-left" data-role="button" data-icon="bars" data-iconpos="notext">&nbsp;</a>
		<a href="#menu-right" data-role="button" data-icon="bars" data-iconpos="notext">&nbsp;</a>
		<h1>jQuery Mobileでスライドメニューを作る</h1>
	</div>
	<div role="main" class="ui-content">
		<h2 id="anchor1">Anchor1</h2>
		<p>Anchor1の内容</p>
		<h2 id="anchor2">Anchor2</h2>
		<p>Anchor2の内容</p>
		<h2 id="anchor3">Anchor3</h2>
		<p>Anchor3の内容</p>
</div>
<div data-role="panel" id="menu-left" data-theme="b">
	<ul data-role="listview">
		<li><a data-rel="close" ata-ajax="false" class="anchor" href="#anchor1">anchor1</a></li>
		<li><a data-rel="close" ata-ajax="false" class="anchor" href="#anchor2">anchor2</a></li>
		<li><a data-rel="close" ata-ajax="false" class="anchor" href="#anchor3">anchor3</a></li>
	</ul>
	<p class="close-btn"><a href="#" data-rel="close" data-role="button" data-theme="c" data-icon="delete">Close</a></p>
</div>
<div data-role="panel" id="menu-right" data-display="overlay" data-position="right" data-theme="a">
	<a href="#" class="ui-btn-right" data-rel="close" data-role="button" data-icon="delete" data-iconpos="notext">&nbsp;</a>
	<h3>Right panel</h3>
	<p>右から開くパネルの内容</p>
</div>

JavaScriptでアンカーリンクを有効にする

以下の理由により、#を有効にするjsを記述します。
コードはwryokuさんで紹介されていたものです。

jquerymobileでは1つのファイルで複数のページがあるように作ることができ、その機能上で「#（ハッシュ、シャープじゃないよ）」を利用するために、
ページ内アンカーするときには「＃」が無効化されてしまうようです。 

$(document).on('click', 'a.anchor', function(e){
	e.preventDefault();
	var y = $($(this).attr('href')).offset().top;
	$.mobile.silentScroll(y);
});

アンカーリンクを指定するaタグには、ata-ajax=”false”を付与します。
また、今回はリンク先へ移動すると同時にメニューを閉じているため、data-rel=”close”でメニューを閉じるようにしています。

<a data-rel="close" ata-ajax="false" class="anchor" href="#anchor1">anchor1</a>

RELATED POSTS