【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

スマホサイトで使える!横から出てくるメニューの作成方法【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サイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+