記事の内容やaishipシリーズに関するお問い合わせはこちらから

0120-173-163 お電話

[電話受付時間]平日9:30〜19:00

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のサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。 またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。 さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。
         

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