スマートフォン時に横から出てくるメニューを設置する方法
はじめに
今回はスマートフォンでの表示時に横から出てくるメニューの設置方法についてご説明します。
以下のデモサイトを667px以下のブラウザサイズでご覧いただきます。
デモサイト
このように「ニョキ」っと出てくるメニューです。
目次
１．使用するツール
２．導入方法
３．既にid等を決めている場合
１．使用するツール
今回は「sidr（シドル）」というツールを使用します。
ⅰ）ダウンロード
sidrはjQueryのプラグインとして提供されています。上記公式サイトから必要なファイルをダウンロードしましょう。
“Dounload”をクリックします。
ⅱ）設置
「sidr-package」内にあるjsファイルとcssファイルを任意の箇所に設置します。
2.導入方法
具体的な導入方法について説明させていただきます。まずは設置したファイルへのリンクを設定します。
<script src="javascripts/jquery.js"></script> <script src="javascripts/sidr/jquery.sidr.min.js"></script> <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">//jquery.sidr.light.cssにする事でレイアウトを変更する事もできます
ⅰ）細かい設定
$(document).ready(function() {
$('#openButton').sidr({//メニューを開くスイッチになるセレクタを指定します
name: 'right-sidr',//class「right-sidr」がメニューの中身になります
side: 'right'//leftに変更する事で左から開きます
});
});
「メニューを開くスイッチになるセレクタ」「どちらからメニューが出てくるか」「メニューを括るidはどうするか」等の設定を行います。
デフォルトでは「右からメニューが出てくる」「メニューを括るidは”sidr”」となります。
※セレクタは必須項目です。
ⅱ）メニューを開くボタンの設定
デモサイトでは、以下の様に設定しました。
<a id="openButton" href="#sidr"> <img src="img/icon/menuBtn.png" class="size"> <p>Menu</p> </a>
これで、id=”openButton”のaタグをクリック→リンク先の#sidr（つまりclass=”right-sidr”）が開くという流れができました。
※リンクの#sidrを、name: ‘right-sidr’と上記のコードで設定しているため
ⅲ）メニューの内容を設定
<div id="right-sidr">
<ul>
<li><a href="#">リスト1</a></li>
<li><a href="#">リスト2</a></li>
<li><a href="#">リスト3</a></li>
</ul>
</div>
以上の設定で横から出てくるメニューを作成する事ができます。
しかし、ASP等を使用していると、最初からセレクタが決められており、設定が難しいという場合があります。その際にどうすればいいかを次の章で説明させていただきます。
3.ASP側で既にid等を決めている場合
「id=”right-sidr”」の中身がサイドメニューの中身となるので、サイドメニューに入れたいコンテンツを「id=”right-sidr”」でくくってしまいましょう。
ⅰ）設定方法
デモサイトでの設定は以下の様になります。
$(document).ready(function() {
$('.s-login,.s-search').wrapAll('<div id="right-sidr">');
});
s-loginが「会員ログイン」でs-searchが「商品検索」です。
以上の2つのブロックが横から出てくるメニューに組み込まれているのが分かります。
wrapAllを使用して「.s-login,.s-search」の2つを
<div id="right-sidr">
で括るというコードです。
wrapAllについて、詳しくはこちらをご覧ください。
ⅱ）確認
最後に、CSSでレイアウトを整える事で完成です。
おわりに
jqueryやJavaScriptはHTML初心者には少しとっつきやすい印象がありますが、非常に便利です。
出来ることの幅も大きく広がりますので、ぜひチャレンジしてみてください。
井上
