jQuery
【jQuery】サイトにoffcanvasサイドバーを設置。form5-offcanvas
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ライセンス