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

jQuery

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ライセンス

Latest Posts

Related Posts