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

• Tag
• jQuery
• Navigation
• Responsive