【jQuery】サイトにoffcanvasサイドバーを設置。form5-offcanvas
jQuery
July 25, 2016
【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ライセンス
![[data-parallax]](https://voyager-jp.com/wordpress/wp-content/uploads/2016/10/data-parallax.jpg)