左右から開くスライドパネル、スライドメニューにアンカーリンクを使用するパターンを作成してみました。
スライドメニューの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>