ウェブのあれこれ
ウェブを活用したいひとのためのブログ
横からスライドしてくるドロワーメニューを簡単に実現するjQueyプラグイン
2015/06/15 Javascript

横からスライドしてくるドロワーメニューを簡単に実現するjQueyプラグイン

スマホサイトなどで、メニューボタンを押すとスライドして現れるドロワーメニューをよく見かけますね。そんなドロワーメニューのjQueryプラグインを作りました。

デモ

デモを表示する。

実装方法

<link type="text/css" rel="stylesheet" href="./slide_menu/jquery.slide_menu.css" />
<script type="text/javascript" src="./slide_menu/jquery.slide_menu.js"></script>

<button type="button" class="menuBtn">メニューを表示する</button>
<div style="display:none">
    <nav class="menu">
        <h1>ヨコからでてくるメニュー</h1>
        <ul>
            <li><a href="#">メニュー 1</a></li>
            <li><a href="#">メニュー 2</a></li>
            <li><a href="#">メニュー 3</a></li>
            <li><a href="#">メニュー 4</a></li>
            <li><a href="#">メニュー 4</a></li>
        </ul>
    </nav>
</div>
<script>
$(function(){
    $('.menu').slideMenu({trigger:'.menuBtn'});
});
</script>
メニューとして表示したい要素にこのプラグインを設定するだけです。
トリガーとなるメニューボタンのセレクタをtriggerに指定します。

グレーアウトとメニューの背景はCSSにて指定可能です。
メニュー領域は「slideMenu」というクラスになるので、「slideMenu」配下の指定でメニュー表示要素のスタイルを指定すればCSSでデザイン可能です。

スライドの仕方はtransformプロパティとtransitionプロパティを利用して、左右に動かしているだけなのでサクサク動くと思います。transformやtransitionの設定を変更すれば動きも変更できます。

ソースコードはそんなに複雑ではないので、いろいろとカスタマイズしてみてください。

ダウンロード

プラグインをダウンロードする(zipファイル)

Provided by Revolme inc.
revolme.co.jp