左右から開くスライドパネル、スライドメニューにアンカーリンクを使用するパターンを作成してみました。
スライドメニューのjQueryプラグインに関してはいくつかご紹介してきましたが、Andoroidの旧バージョンでも安定して動くとなると、やはりjQuery Mobileが安定してそうです。
使い方
必要なファイルを読み込む。
jQueryライブラリとjQuery Mobileライブラリ、CSSを読み込みます。
下記はCDNを使用していますが、自分のサーバーにアップしたものを使いたい場合は、jQuery Mobileのサイトよりダウンロードして下さい。
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://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"> </a>
<a href="#menu-right" data-role="button" data-icon="bars" data-iconpos="notext"> </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"> </a>
<h3>Right panel</h3>
<p>右から開くパネルの内容</p>
</div>
JavaScriptでアンカーリンクを有効にする
以下の理由により、#を有効にするjsを記述します。
コードはwryokuさんで紹介されていたものです。
jquerymobileでは1つのファイルで複数のページがあるように作ることができ、その機能上で「#（ハッシュ、シャープじゃないよ）」を利用するために、
引用元：https://wryoku.com/jquerymobile-anchor_null-answer/
ページ内アンカーするときには「＃」が無効化されてしまうようです。
$(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>
