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. linkunderline

    JavaScript

    テキストリンクにアンダーラインのアニメーションを実装できる「linkunderline」

    linkunderlineは、テキストリンクにアンダーラインを引くアニ…

  2. NO IMAGE
  3. SuperEmbed.js

    JavaScript

    さまざまな埋め込み動画をレスポンシブで表示できる「SuperEmbed.js」

    SuperEmbed.jsは、さまざまな埋め込み型の動画をレスポンシブ…

  4. jQuery Lighter

    JavaScript

    優雅なフェードで拡大縮小されるLightbox系ギャラリー・jQuery Lighter

    jQuery Lighterは美しいフェードで画像を拡大縮小させること…

  5. JavaScript

    軽量で嬉しい!画像を拡大ズームしてくれるjQueryプラグイン「Leroy Zoom」

    Leroy ZoomというjQueryプラグインを使えば、画像を拡大ズ…

  6. countdownCube

    JavaScript

    3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」

    countdownCubeは3Dキューブのようにクルッと回転するカウン…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP