超簡単にドロワーメニューを実装できるjQueryプラグイン「SlideReveal」

以前、「ドロワーメニューを簡単に実装できるjQueryプラグイン5選」でも紹介したjQueryプラグイン「SlideReveal」を紹介します。

とても簡単にドロワーメニューを実装できます。

以前紹介した「Drawer」はスクリプトファイル以外にも専用のスタイルシート読み込みましたが、SildeRevealはスクリプトファイルの読み込みだけなので、独自のスタイルを簡単に設定できることが特徴です。

少ないコードでドロワーメニューを実装できるjQueryプラグイン「Drawer」

2017年11月21日

導入方法

ダウンロード

公式サイトにアクセスしてzipファイルをダウンロードしましょう。
zipファイルを展開してjquery.slidereveal.min.jsを適当なディレクトリに配置してください。

コード

jQueryとSlideRevalを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.slidereveal.min.js"></script>

ドロワー部分のHTMLとトリガーとなるボタンのHTMLを記述します。
ドロワー部分のidにsliderを、トリガーとなるボタンのidにtriggerを記述してください。

<!-- ドロワー部分 -->
<nav id="slider">
    <h2>Hello World!!</h2>
    <ul>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>ｄ
    </ul>
</nav>

<!-- ドロワー表示・非表示ボタン -->
<button id="trigger">ドロワー表示・非表示</button>

続いて、ドロワー部分がわかりやすいように、cssで背景色を設定します。

nav{
    background: #eee;
}

最後に、SlideReval用のスクリプトを記述します。
id=”#trigger”をクリックすると id=”slider” が表示されたり、非表示になったりします。
また、ドロワーが開いた状態でESCキーを押すと、ドロワーが閉じます。

$('#slider').slideReveal({
    trigger: $("#trigger")
});

よく使う機能

イベント

SlideRevealではドロワーの表示・非表示のイベントを取得することができます。
取得できるイベントは以下の4つです。

1. ドロワーが表示された直後
2. ドロワーが非表示になった直後
3. ドロワーが表示される直前
4. ドロワーが非表示になる直前

$('#slider').slideReveal({
    trigger: $("#trigger"),
    shown: function (slider, trigger) {
        alert("ドロワーが表示された直後");
    },
    hidden: function (slider, trigger) {
        alert("ドロワーが非表示になった直後");
    },
    show: function (slider, trigger) {
        alert("ドロワーが表示される直前");
    },
    hide: function (slider, trigger) {
        alert("ドロワーが非表示になる直前");
    }
});

メソッド

ドロワーの表示非表示はメソッドからでも操作することができます。

まずはHTMLのボタンを3つ作成します。

<button id="btn1">ボタン1[ドロワー表示・非表示]</button>
<button id="btn2">ボタン2[ドロワー表示]</button>
<button id="btn3">ボタン3[ドロワー非表示]</button>

続いて、SlideRevealを生成し、各ボタンをクリック時の処理を記述します。

//SlideRevealのオブジェクト生成
var slider = $('#slider').slideReveal();

//ボタン1をクリックしたとき、toggleを実行
$('#btn1').click(function () {
    slider.slideReveal('toggle');
});

//ボタン2をクリックしたとき、ドロワー表示
$('#btn2').click(function () {
    slider.slideReveal('show');
});

//ボタン3をクリックしたとき、ドロワー非表示
$('#btn3').click(function () {
    slider.slideReveal('hide');
});

ドロワーをオーバーレイにする・右側にする

通常の設定だと、ドロワーは左から出てきて、コンテンツ全体がずれます。
「ドロワーは右から表示したい！」
「オーバーレイにしたい！」
という方もいるでしょう。

これらの設定も簡単に行うことができます。
javascriptを下記のように記述してください。

$('#slider').slideReveal({
    trigger: $("#trigger"),
    //右側から表示
    position: 'right',
    //オーバーレイにする
    overlay: true
});

他にもオプションはあるので、興味のある方はいじってみてください。

関連記事

少ないコードでドロワーメニューを実装できるjQueryプラグイン「Drawer」

2017年11月21日

ドロワーメニューを簡単に実装できるjQueryプラグイン5選

2017年11月13日