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

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

使用方法
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>

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

sponsors

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

記事作成:
記事URL:

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