【jQuery】シンプルなjQueryサイドバープラグイン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ライセンス

 
jQuery Sidebar

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

  • LATEST
  • RELATED
  • POPULAR