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

左右から開くスライドパネル、スライドメニューにアンカーリンクを使用するパターンを作成してみました。
スライドメニューの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">&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つのファイルで複数のページがあるように作ることができ、その機能上で「#（ハッシュ、シャープじゃないよ）」を利用するために、
ページ内アンカーするときには「＃」が無効化されてしまうようです。

引用元：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>

デモページ