js-offcanvasは、上下左右にオフキャンバスのナビゲーションを実装できるjQueryプラグインです。「オフキャンバス」とは、通常時は見えていない様子のことです。必要に応じで画面に表示させることができます。最近では、スマートフォンサイトのナビゲーションメニューのほとんどがこの仕様になっています。通常時は非表示で邪魔にならないですし、表示させれば画面の広さを最大限に生かせる点で優れています。
今回はそれを実現してくれるjs-offcanvasについて、詳しく見ていきましょう。
js-offcanvas
js-offcanvasの実際のデモ動作は以下のページから確認できます。
デモ
js-offcanvasは、軽量でかつ多様性のあるjQueryプラグインです。多様性については、様々なオプションを兼ね備えている点で、製作者の様々なイメージを実現してくれるでしょう。
js-offcanvasの使用方法は簡単です。ファイルをダウンロードしたら以下のように［Offcanvas.css］と［Offcanvas.js］サイトに読み込みます。
<link rel="stylesheet" href="/path/to/js-offcanvas.css" media="screen"> <script src="/path/to/js-offcanvas.pkgd.min.js"></script>
そして、挙動に合わせて指示を加えます。
デモページにある左からナビゲーションが発生する挙動を例にすると、以下のような記述になります。
【HTML】
<button data-offcanvas-trigger="off-canvas-left">Left</button> <aside id="off-canvas-left"></aside>
【js】
$('#off-canvas-left').offcanvas({
modifiers: 'left' // default
});
この指示は画面に重ねるようにナビゲーションが発生します。
一方で以下の指示は、元から表示されている画面自体が右へスライドし、左に隠れているナビゲーションが発生します。
【HTML】
<button data-offcanvas-trigger="off-canvas-left-reveal">Left - Reveal</button>
<aside id="off-canvas-left-o" data-offcanvas-options='{ "modifiers": "left,reveal" }'></aside>
【js】
$('#off-canvas-left-reveal').offcanvas({
modifiers: 'left,reveal'
});
他にも様々な挙動を簡単に実装できますので、ぜひチェックしてみてください。ダウンロードや詳しい使い方は以下からどうぞ。
