シンプルなサイドメニュー表示jQueryプラグイン「jQuery Sidebar」

表示させる要素が限られているWEBサイト。
特にスマートフォン向けではメニューなどをトグルで表示させることが多いかと思います。
こんな時はシンプルにサイドバーを表示させるjQueryプラグインjQuery-sidebarはいかがでしょうか。

sponsors

使用方法

jillix/jQuery-sidebar · GitHubからファイル一式をダウンロード。

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.sidebar.js"></script>
<script>
$(document).ready(function () {
    $(".left").sidebar({side: "left"}); //side:移行は表示させる場所
    $(".btn").on("click", function () { //.btnをクリック後の処理
        $(".left").trigger("sidebar:toggle"); //トグルで表示(close,open単独もあり)
        return false;
    });
});
</script>
    
最後に表示させたい要素と、表示する際にクリックさせる要素を記述して完成です。

<div class="left">表示させたい要素を記述</div>
<p><a href="#" class="btn">クリック!</p>

サンプル

Hello World

Toggle Left


Javascriptサンプルページ一覧
skuare.net

sponsors