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

    JavaScript

    スマホやタブレットのスワイプにも対応したLightboxを実装できるjQueryプラグイン「Swip…

    今後かなり需要がありそうなjQueryプラグインがあったので使い方も兼…

  2. hop

    JavaScript

    Webページ上の好きな場所をハイライトできる「hop」

    hopはオーバーレイされたWebページ上の好きな場所をハイライトするこ…

  3. no-image

    JavaScript

    Lightboxスタイルのギャラリーやカルーセルを実装できる「slideBox.js」

    slideBox.jsはレスポンシブに対応したLightboxスタイル…

  4. How satisfied are you? Slider
  5. PopSelect

    JavaScript

    タグ形式のセレクトボックスをポップオーバーで表示させる「PopSelect」

    PopSelectはタグ付けするような感覚のセレクトボックスをポップオ…

  6. Building a Vertical Timeline With CSS and a Touch of JavaScript

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP