js-offcanvas

JavaScript

上下左右にオフキャンバスのナビゲーションを実装できる「js-offcanvas」

js-offcanvasは、上下左右にオフキャンバスのナビゲーションを実装できるjQueryプラグインです。「オフキャンバス」とは、通常時は見えていない様子のことです。必要に応じで画面に表示させることができます。最近では、スマートフォンサイトのナビゲーションメニューのほとんどがこの仕様になっています。通常時は非表示で邪魔にならないですし、表示させれば画面の広さを最大限に生かせる点で優れています。

今回はそれを実現してくれる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>

そして、挙動に合わせて指示を加えます。

デモページにある左からナビゲーションが発生する挙動を例にすると、以下のような記述になります。

<button data-offcanvas-trigger="off-canvas-left">Left</button>
<aside id="off-canvas-left"></aside>
$('#off-canvas-left').offcanvas({
modifiers: 'left' // default
});

この指示は画面に重ねるようにナビゲーションが発生します。

一方で以下の指示は、元から表示されている画面自体が右へスライドし、左に隠れているナビゲーションが発生します。

<button data-offcanvas-trigger="off-canvas-left-reveal">Left - Reveal</button>
<aside id="off-canvas-left-o" data-offcanvas-options='{ "modifiers": "left,reveal" }'></aside>
$('#off-canvas-left-reveal').offcanvas({
	modifiers: 'left,reveal'
});

js-offcanvas

Rythim.js音楽のリズムに合わせてボタンなどに躍動感を与える「Rythim.js」前のページ

選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」次のページvDrop

関連記事

  1. JavaScript

    スクロールしても固定表示されてついてくるjQueryプラグイン「Sticky」

    StickyというjQueryプラグインを使えば、スクロールしても固定…

  2. Multi-level push menu
  3. jQuery-LightBox

    JavaScript

    軽量でモバイルフレンドリーなLightbox実装「jQuery-LightBox」

    jQuery-LightBoxは、軽量でレスポンシブにも対応したモバイ…

  4. Line Maker

    JavaScript

    アニメーションするラインを実装できる「Line Maker」

    Line Makerは、いろんなアニメーションをするラインを実装するこ…

  5. Owl Carousel

    JavaScript

    タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carou…

    素晴らしいカルーセルを実装できるjQueryプラグインがあったのでご紹…

  6. stickUp2

    JavaScript

    スクロールしてもついてくるスティッキー実装「stickUp2」

    stickUp2はスクロールしてもついてくるシンプルなスティッキーを実…

最近の記事

  1. エチオピア
  2. 紗々 飴色和栗
  3. DCG-CA21
  4. Apple WatchでのMacロック解除を無効
  5. オータムスイートポテトフラペチーノ

アーカイブ

PAGE TOP