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

関連記事

  1. Kontext

    JavaScript

    iOSの画面切り替えのようなスライドができるJavaScript「Kontext」

    KontextというJavaScriptを使えばiOSの画面切り替えの…

  2. Nivo Zoom

    JavaScript

    Lightbox風に画像をズームして表示させるjQueryプラグイン「Nivo Zoom」

    Lightbox風に画像をズームして表示させるjQueryプラグイン「…

  3. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

  4. no-image
  5. bcralnit.js

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP