jQuery
【jQuery】jQueryを使って簡単にオフキャンバスを実装。jQuery.offcanvas
May 2, 2016

jQuery.offcanvasはキャンバスの内容を外側に入れて、ボタンをクリックすると任意の要素を公開することができます。
このプラグインはモバイルナビゲーションなどで使用できます。
jQuery本体は1.7以上。アニメーションのためにVelocity.jsが必要。
<script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/velocity-animate/velocity.min.js"></script> <script src="node_modules/jquery-offcanvas/dist/jquery.offcanvas.min.js"></script>
<link rel="stylesheet" href="node_modules/jquery-offcanvas/dist/jquery.offcanvas.min.css">
var $el = $("#element").offcanvas(); $(".offcanvas-trigger").on("click", function() { $el.offcanvas("toggle"); });
$("#element").offcanvas({ origin: "right", duration: 400 });
データの属性を介してのオプションを設定
<div id="element" data-offcanvas-duration="200" data-offcanvas-easing="ease"> ... </div>
{ container: "offcanvas", element: "offcanvas-element", inner: "offcanvas-inner", open: "offcanvas-open", outer: "offcanvas-outer", overlay: "offcanvas-overlay" }
$("#element").offcanvas("show");
$("#element").on("shown.offcanvas", function() { // do stuff when offcanvas is revealed and animation is finished });
$("#element").on("toggle.offcanvas", function(event, visible) { console.log(visible) // outputs offcanvas state (true or false) });
MITライセンス