jQuery

【jQuery】シンプルなjQueryサイドバープラグインjQuery Sidebar

July 12, 2016
jQuery Sidebar

【jQuery】スマートフォンサイトやレスポンシブに最適なjQueryメニュープラグイン10選でご紹介したjQuery Sidebar。jQuery SidebarはシンプルなjQueryサイドバープラグイン。

JS

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sidebar/3.3.2/jquery.sidebar.min.js"></script>

HTML

...
<!-- Include jQuery -->
<script src="path/to/jquery.min.js"></script>
<!-- Include jQuery Sidebar -->
<script src="path/to/jquery.sidebar.min.js"></script>
<!-- Or from CDNJS:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sidebar/3.3.2/jquery.sidebar.min.js"></script>
-->
...
<div class="sidebar left">Hello World</div>
<div class="sidebar right">I am on right!</div>
<div class="sidebar top">I am on top!</div>
<div class="sidebar bottom">I am on bottom!</div>
...
<script>
    // Sidebar on left (default)
    $(".sidebar.left").sidebar().trigger("sidebar:open");

    // Sidebar on right side
    $(".sidebar.right").sidebar({side: "right"});

    // Sidebar on top side
    $(".sidebar.top").sidebar({side: "top"});

    // Sidebar on bottom side
    $(".sidebar.bottom").sidebar({side: "bottom"});
</script>
...

オプション

$(".my-sidebar").sidebar({...});

上記の後にサイドバー切り替え

$(".my-sidebar").trigger("sidebar:open");
$(".my-sidebar").trigger("sidebar:close");
$(".my-sidebar").trigger("sidebar:toggle");
$(".my-sidebar").trigger("sidebar:close", [{ speed: 0 }]);

サイドバーが開かれた後/閉じた後のイベントsidebar:opened/sidebar:closed

$(".my-sidebar").on("sidebar:opened", function () {
   // Do something on open
});

$(".my-sidebar").on("sidebar:closed", function () {
   // Do something on close
});
  1. speed (Number): アニメーションの速度 (default: 200)
  2. side (String): 左|右|上|下 (default: “left”)
  3. isClosed (Boolean): サイドバーが閉じられているかどうか (default: false)
  4. close (Boolean): サイドバーはデフォルトで閉じられます。

MITライセンス