HOME > コラム > WEB全般 > jQueryプラグイン「SIDR」の使い方

jQueryプラグイン「SIDR」の使い方

コラム

今回は、jQueryプラグインの「SIDR」を紹介致します。
このjQueryプラグインは、ページの上下左右からメニューが出てくる挙動をするプラグインでして、スマホアプリでよく見るような感じのサイトを演出することが出来ます。
同様の挙動をするプラグインやJavascriptが多数あるので、色々なものがあるということを知った上で見て頂ければと思います。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

jQueryプラグイン「SIDR」の使い方

SIDRサイトイメージ
SIDRとは?
画面の上下左右からメニューを出すプラグイン

今回のjQueryプラグインの紹介は、スマホやPCサイトでも変わらずブラウザ内の上下左右からメニューをにゅるっと表示するプラグインです。
スマホページでは、たくさんのサイトが実装しているのを見かけることがあります。
当サイトでも同様にしていますが、利用しているプログラムが異なります。

横からメニューが出てくるようなプラグインはそこそこ色々な種類がありますので、数あるうちの一つということで見て頂ければと思います。

仕様に関しては、メニューのリストをインターフェイスの中に出したり隠したりするというような感じです。
中には別のページを呼び出して表示するというモノもあるので、仕様の違いも色々抑えながら理解したいところですね。

本家サイトとGit Hub

以下が本家サイトとGit Hubです。

ダウンロードと組み込みサンプル
SIDR組み込み済みファイルのダウンロード
phptemp_sidr_160318.zip
組み込み済みサンプル

「SIDR」を組み込んだページのサンプルです。

元になるWEBサイトテンプレート(PHP)について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

組み込み手順

凡そ、流れ的には以下のような順番です。

  1. CSSとJSファイルをテンプレート内に移動しましょう。
    数種類のファイルがございますので、適宜選んで下さい。
  2. 出したり隠したりするメニュー部分を追記しましょう。
  3. 必要なJS記述をしましょう。
  4. 全てのファイルをアップロードします。
CSSファイルの作成

まず、ダウンロードファイルの中から「 /dist/jquery.sidr.js 」と「 /dist/stylesheets/jquery.sidr.dark.css 」を、テンプレート内のCSSとJSフォルダに入れましょう。
minファイルや、色を変えることが出来るCSSファイルがありますので、適宜選んで下さい。

また、「 /example/style.css 」の中の 86 行目以下の以下の記述を、先程選んだ「 /dist/stylesheets/jquery.sidr.dark.css 」の最上段あたりに追記しておきましょう。

.menu-button {
    display: block;
    position: absolute;
    top: 20px;
    left: 20px;
    background: url(/img/menu.gif) no-repeat;
    overflow: hidden;
    width: 34px;
    height: 31px;
    text-indent: -9999px;
}

.menu-button.right {
    right: 20px;
    left: auto;
}

.menu-button.bottom {
    top: 100px;
}

.menu-button.fixed {
    position: fixed;
}

#overlay {
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 999998;
    display: none;
}

.sidr-open #overlay {
    display: block;
}

/* Settings for fullwidth */
.sidr.fullwidth {
    width: 100%;
}

.sidr.left.fullwidth {
    left: -100%;
}

.sidr.right.fullwidth {
    right: -100%;
}
/* END Settings for fullwidth */

上記の記述はクリック(タップ)するボタンの位置を決めたりしている内容です。
それ以外の設定的な内容は既存のCSSで大丈夫ですので、上記の記述のみをコピペする感じです。

他、ダウンロードしたファイル内「」に「 menu.gif 」がありますので、「 menu.gif 」を「 /img/ 」フォルダに移動して下さい。
上記 css 記述の「 .menu-button 」の中にある画像がそれになります。

この時、上記のCSSやJSファイルをインクルードさせている「 /_set/css.php 」と「 /_set/js.php 」に記述するのを忘れないようにして下さい。

メニュー部分の記述の追記

配布しているテンプレートでは、インクルードファイルを作成しまして、そのインクルードファイル内に記載しています。
「 /_set/sidemenu.php 」です。


<div id="other-name">
<ul>
<li><a href="/"><?php echo "$pankuzu_top"; ?></a></li>
<li><a href="/cate_01/"><?php echo "$cate_01_linkname"; ?></a>
<ul>
<li><a href="/cate_01/cate_01_01/"><?php echo "$cate_01_01_linkname"; ?></a></li>
</ul>
</li>
<li><a href="/cate_02/"><?php echo "$cate_02_linkname"; ?></a>
<ul>
<li><a href="/cate_02/cate_02_01/"><?php echo "$cate_02_01_linkname"; ?></a></li>
</ul>
</li>
<li><a href="/cate_03/"><?php echo "$cate_03_linkname"; ?></a>
<ul>
<li><a href="/cate_03/cate_03_01/"><?php echo "$cate_03_01_linkname"; ?></a></li>
</ul>
</li>
<li><a href="/cate_04/"><?php echo "$cate_04_linkname"; ?></a>
<ul>
<li><a href="/cate_04/cate_04_01/"><?php echo "$cate_04_01_linkname"; ?></a></li>
</ul>
</li>
<li><a href="/sitemap.php"><?php echo "$oth_page_01_linkname"; ?></a></li>
<li><a href="/privacy.php"><?php echo "$oth_page_02_linkname"; ?></a></li>
</ul>
</div>

<a id="only-click" class="menu-button right" href="#sidr">Toggle menu</a>

上記を記述した「 sidemenu.php 」には、次の項目でJS記述も追記します。

必要なJS記述

先の項目に出てきたメニュー部分の記述の後に、以下の記述を加えて下さい。
必要なJavaScriptの記述です。

<script>
$(document).ready(function () {
	$('#only-click').sidr({
		name: 'other-name',
		bind: 'click',
		side: 'right',
		onOpen: function () {
			console.log($.sidr('status'));
		},
		onClose: function () {
			console.log($.sidr('status'));
		},
		onOpenEnd: function () {
			console.log($.sidr('status'));
		},
		onCloseEnd: function () {
			console.log($.sidr('status'));
		}
	});
});

$( window ).resize(function () {
	$.sidr('close', 'sidr');
});
</script>

サンプルも配布テンプレートの内容も右側から左側に出てくるようにしています。

後は、「 sidemenu.php 」を全ページにインクルードさせましょう。
他にもオプションがあるようなので、細かいオプションについては本家サイトをご覧くださいますようお願い致します。

全てのファイルをアップロードする

全てのファイルの設定が完了したら、ファイルをアップロードして動作確認を行いましょう。

今回は、現行の仕様を変えることなく要素を追加しただけで作業が完了です。
動作確認も手早く出来る感じです。

その他、補足

WEBサイトテンプレート(PHP)の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート(PHP)は「 phptemp_160202.zip 」です。
締め

いかがでしたでしょうか?
レスポンシブ対応をされていたり、PCサイトでも手早くサイト内を回遊してもらいと思われている方にはぴったりのプラグインですね。

既存のhtmlソースで対応するのはかなり難しいと思います。
ですので、こういう時は追加する形で対応しましょう。

横からメニューが出たりするプラグインは他にも多数あるので、回を追うごとに色々試してみたいと思います。
どうぞお楽しみに!

執筆 : 清水 隼斗

jQueryプラグイン「SIDR」の使い方のAMPページ

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP