ECサイト構築・リニューアルならクラウド型ECサイト構築ASPサービスサイトへ
資料請求
TOP

CATEGORY

SERVICE

スマホサイトで使える!横から出てくるメニューの作成方法【sidr】

スマホサイトで使える!横から出てくるメニューの作成方法【sidr】

スマートフォン時に横から出てくるメニューを設置する方法

はじめに

今回はスマートフォンでの表示時に横から出てくるメニューの設置方法についてご説明します。

以下のデモサイトを667px以下のブラウザサイズでご覧いただきます。

デモサイト

メニューメニュー2

このように「ニョキ」っと出てくるメニューです。

目次

1.使用するツール
2.導入方法
3.既にid等を決めている場合

1.使用するツール

今回は「sidr(シドル)」というツールを使用します。

ⅰ)ダウンロード

sidrはjQueryのプラグインとして提供されています。上記公式サイトから必要なファイルをダウンロードしましょう。

sidr
“Dounload”をクリックします。

ⅱ)設置

css
js
「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初心者には少しとっつきやすい印象がありますが、非常に便利です。

出来ることの幅も大きく広がりますので、ぜひチャレンジしてみてください。

井上

                   
商品の販売に“夢中”になれる
クラウド型ECサイト構築ASP

ECサイト構築、リニューアルを2000社以上支援してきた知見から
ECの専門家として御社のEC事業成長をサポートします。

  • 導入実績2000社以上


    導入実績

  • 注文単価増加率114%

    導入1年後の
    注文単価
    増加率

  • 売上成長率128%

    導入1年後の
    売上成長率

  • EC支援歴20年


    EC支援歴

         

レスポンシブWebデザインカテゴリの最新記事