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. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

  2. Progressively

    JavaScript

    画像を徐々に読み込んでくれるJSライブラリ「Progressively」

    Progressivelyは画像を徐々に読み込ませることができるJSラ…

  3. Tabslet

    JavaScript

    jQueryプラグインでタブ機能が実装できる「Tabslet」

    TabsletというjQueryプラグインを使えばWebサイトにタブ機…

  4. no-image

    JavaScript

    マスクエフェクトが素敵なスライダー実装「Masked Circle Slider」

    Masked Circle Sliderは、円形のマスクエフェクトが素…

  5. Lena.js

    JavaScript

    多彩な画像処理ができるJSライブラリ「Lena.js」

    Lena.jsは多彩な画像処理を行うことができるJSライブラリです。セ…

  6. popModal

    JavaScript

    6種類のモーダルウィンドウを実装できる「popModal」

    popModalは6種類のモーダルウィンドウを実装することができるjQ…

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP