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

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

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

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

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

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

• Sidr - Berriart
• Git Hub

phptemp_sidr_160318.zip

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

• 組み込み済みサンプル

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

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

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

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

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

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

追記する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記述も追記します。

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

全ページ共通の global.php の内容

<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」の使い方の通常ページ