【jQuery】サイトにoffcanvasサイドバーを設置。form5-offcanvas

【jQuery】スマートフォンサイトやレスポンシブに最適なjQueryメニュープラグイン10選でご紹介したform5-offcanvas。form5-offcanvasは、サイトにoffcanvasのサイドバーを使用できるようにする軽量のjQueryプラグイン。

使用方法

jQuery,CSS設定

<link rel="stylesheet" href="path/to/form5-offcanvas.css">
...
<script src="path/to/jquery.js"></script>
<script src="path/to/form5-offcanvas.min.js"></script>
<script>
$(function(){
$('offcanvas').offcanvas();
});
</script>

offcanvas要素

<body>
<main>
...
</main>
<offcanvas>
...
</offcanvas>
</body>

オプション

$('offcanvas').offcanvas({
toggle: '.toggle-canvas',
canvas: ['main'],
open: function(){},
close: function(){},
init: function(){},
debug: false
});

toggle: string (selector) Default: ‘.toggle-canvas’
canvas: array (of selectors)Default: [‘main’]
open: function () Default: function() {}
resize: function () Default: function() {}
init: function () Default: function() {}
debug: boolean Default: false

初期化後

// Toggle sidebar
$('offcanvas').offcanvas();
// Open sidebar
$('offcanvas').offcanvas('open');
// Close sidebar
$('offcanvas').offcanvas('close');
$('offcanvas').offcanvas('destroy');

MITライセンス

 
form5-offcanvas

【jQuery】サイトにoffcanvasサイドバーを設置。form5-offcanvas

  • LATEST
  • RELATED
  • POPULAR