HOME > コラム > jQuery/JS Chips > 上下左右からスライドでメニューを出すことが出来るjQueryプラグイン「Slidebars」の使い方

上下左右からスライドでメニューを出すことが出来るjQueryプラグイン「Slidebars」の使い方

コラム

Slidebarsは、上下左右から自由にメニューを出すことができるjQueryプラグインです。
以前に記事にした「SIDR」と同じような動作をします。
動作仕様は大きく違います。
Slidebarsをカスタマイズしたりするには、元の仕様のまま使うとすれば HTML5 の canvas の概念が分からないと若干難しいかもしれません。
その辺りを踏まえて見て頂ければと思います。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

jQuery/JS Chipsに投稿したコラム記事

上下左右からスライドでメニューを出すことが出来るjQueryプラグイン「Slidebars」の使い方

「SIDR」と同じような動作するjQueryプラグイン

Slidebarsは、以前にも記事にした「SIDR」と似たような動作をします。
組み込み済みサンプルと「SIDR」を見てみてください。

Slidebarsは、上下左右、ブラウザ上の見えないところからメニューが出てくるような動作をします。
私自身、今回の組み込みに際して色々考えたところが、 canvas の仕様のところでした。

あまり使わない要素だったということもあり、曖昧な仕様で組み込もうとしたので、何度か手直しをすることになりました。
CSSでコントロールするので、あまり苦にはなりませんが、やはりここで一度 canvas について理解しておくといいかな、と思いました。

組み込みサンプルでは左側からメニューが出てきます。
上右下からでも出すことが出来ますので、適宜修正を重ねてみてくださいね。

それでは進めていきたいと思います。

本家サイトとGitHub

本家サイトとGitHubです。
プラグイン一式をダウンロードして頂けます。

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

サンプルです。

メニューは左側から出てきます。

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

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

ポイント
追加で読み込ませたファイル

ヘッダ内で追加で読み込ませたファイルは以下のファイルです。
今回のjQueryは「 1.8 」以上を使わないといけないため、本家で読み込ませているバージョンで読み込ませています。

<link href="/css/sample.css" type="text/css" rel="stylesheet" />
<link href="/css/slidebars.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

sample.cssには、必要な記述を入れています。
ボタンの装飾に関する記述は、当方で書き入れた記述ですので、見た目を変えたい場合はここの装飾を修正してください。

nav[canvas] {
	position: fixed;
	top: 0;
	width: 100%;
	text-align: left;
}

#sample-01 {
	padding-top: 5px;
	padding-left: 20px;
}

#sample-button {
	display: inline;
	border: 1px solid #666;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 1px 10px;
	background-color: #fff;
}

また、最後にJavascript記述のスクリプトを読み込ませています。

<script src="/js/slidebars.js"></script>
<script src="/js/scripts.js"></script>

このscripts.jsが大雑把に言えばコントローラー的な役割をするスクリプトになっています。
例えばですが、今回の組み込み済みサンプルで直接関係している記述の部分は以下の箇所です。

// Left Slidebar controls
$( '.js-open-left-slidebar' ).on( 'click', function ( event ) {
event.stopPropagation();
controller.open( 'slidebar-1' );
} );

$( '.js-close-left-slidebar' ).on( 'click', function ( event ) {
event.stopPropagation();
controller.close( 'slidebar-1' );
} );

$( '.js-toggle-left-slidebar' ).on( 'click', function ( event ) {
event.stopPropagation();
controller.toggle( 'slidebar-1' );
} );

上記以外の記述は他の動作をするために必要な記述になりますので、併せて使ってくださいね。
上記の解釈は「”.js-open-left-slidebar”がクリックされると、”slidebar-1”の部分が”オープン”若しくは”クローズ”若しくは”トゥグル(開閉)”する。」という解釈です。

テンプレート内のコンテンツ要素の記述

ここが一番重要です。 まず、基本的な概念を押さえて頂きたいところです。

ざっくりなお話ですが、以下の構成にしなければ、組み込み済みサンプル通りには動きません。

<body>
<div canvas="container">
通常のコンテンツが表示されるエリア。
</div>
<nav canvas="">
ボタンが表示されるエリア
</nav>
<div off-canvas="slidebar-1 left shift">
隠れているコンテンツエリア
</div>
</body>

基本的には上記のような構図です。
”canvas="container"”で囲まれた部分だけしか、正常に表示はされません。

本家では、 canvas を使ってコンテンツ位置をコントロールしていました。
ですので、この canvas への理解があるようでしたら、 canvas を使わなくてもコンテンツのコントロールが出来るという感じです。

因みにですが、”slidebar-1”と”left”と”shift”はオプションで選び調整するものですので、上下や右からメニューを出したい時は適宜修正をしてください。
また、”shift”も複数のオプションから選べるようになっていますので、slidebars.jsを見て適宜修正してくださいね。

トリガーについて

今回のトリガーは見たまんま、ボタンになっています。
実は、本家では色々なトリガーを用意してもらえているようです。
本家からファイル一式をダウンロードしてきたら、その中にサンプル記述がありましたので、そちらのファイルを参考にしてみてください。

組み込み済みサンプルの構成について

新たに読み込み用ファイルを作成し、メニュー部分を共通化したり、ヘッダファイルに「 canvas="container" 」を追記したりしています。
特に難しいものではないと思うので、ファイルをご覧頂き、ご確認の上、適宜対処するようにしてください。

最後に動作確認

上記一式のご対応を頂いた後にファイルをアップすれば正常に動作すると思いますので、最後は必ずチェックしてからアップしてくださいね。

既存コンテンツにこれらのメニューを追記する際には、色々と注意しなければいけないことがあります。
canvas 要素を使いインターフェイスのコントロールを行なっているため、canvas 要素と既存コンテンツをうまく調整しなければコンテンツは正常に表示されません。
例えば、「ページ上部に戻る」というようなjsでコントロールするコンテンツとの共存や、既存のjQueryでインターフェイスコントロールをしてる場合、尚更です。

本スクリプトは本家が canvas 要素を使っているため、使わざるを得ない感じになっているかもしれませんが、jsスクリプトフィアルとcssファイルをうまく触ることができれば割と何でもうまく動作します。
しかし、それならば別にこのスクリプトを使う必要性がなくなってくるので、このスクリプトを使われるということでしたら、とりあえずは canvas 要素をうまく理解するようにしてください。

その他、補足

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

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

如何でしたでしょうか?
ちょっと小難しい感じがしましたかね。

ただ、動作がスムーズに流れる感があり、なんだか心地のいいスクリプトだった感じがします。
上下左右から出すことが出来るので、コンテンツに併せてうまく設置すると見やすいメニューが出来るかもしれません。

もし、メニューの表示にお困り時には、このスクリプトを使ってちょっとした変化を出してみると面白いのかもしれません。

執筆 : 清水 隼斗

上下左右からスライドでメニューを出すことが出来るjQueryプラグイン「Slidebars」の使い方の通常ページ