Canvi

JavaScript

左右からスライド表示するシンプルなナビゲーションメニュー「Canvi」

CanviはVanilla JSによるシンプルなナビゲーションメニューを実装することができます。メニューを必要とする時だけ、サイドからスッと表示させれるので、通常(非表示)時はメニューがない分、スペースも有効活用できますね。

Canvi

デモ

上記のページには、「OPEN LEFT NAVBAR」と「OPEN RIGHT NAVBAR」というボタンが設置されていて、ここをクリックするとナビゲーションメニューが表示されます。

「OPEN LEFT NAVBAR」は左側から、「OPEN RIGHT NAVBAR」は右側からメニューが出てきます。

左側のメニューは現在のページ上にかぶさるような形で表示される一方、右側のメニューは現在のページがそのまま左側にずれて、その下からメニューが現れるような形で表示されます。

どちらも、シンプルにスッとスライド表示するので、煩わしく感じることもなく快適にナビゲーションメニューにアクセスできるかと思います。

また、Canviにはオプションもいくつか用意されています。主なオプションは、content、isDebug、navbar、speed、openButton、position、pushContent、width、responsiveWidthsです。デフォルト値は、contentが’.canvi-content’、isDebugがfalse、navbarが’.canvi-navbar’、speedが’0.3s’、openButtonが’.canvi-open-button’、positionが’left’、pushContentがtrue、widthが’300px’です。
スピードや幅、それから左側からか右側からかの指定などをオプションから手軽にセッティングできるのでとても便利ですね。

ほかにも、MethodsやEventsも用意されているので、気になる人はぜひチェックしてみてください。

Canvi

関連記事

  1. JavaScript

    ウェーブ(波形)を簡単に描いてくれるjQueryプラグイン「Wave」

    WaveというjQueryプラグインを使ってみました。これを使えばウェ…

  2. JavaScript

    レスポンシブ対応で画像やテキストも自由にスライドできるjQueryスライダー「Responsly.j…

    スマホにも対応したレスポンシブのjQueryスライダー「Respons…

  3. no-image

    JavaScript

    タッチフレンドリーでモバイルでも快適に動作する「simplelightbox」

    simplelightboxはレスポンシブ対応でタッチフレンドリーなl…

  4. AJAX Live Search
  5. jquery.inputmask

    JavaScript

    テキスト入力のマスク(入力補助)を作成する「jquery.inputmask」

    jquery.inputmaskは、ウェブページでのテキスト入力のマス…

  6. Ion Zoom

    JavaScript

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Zoom」

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Z…

最近の記事

  1. KMC-80BK
  2. 味噌ラーメン〜旨辛にんにく味噌〜
  3. STP-XH70
  4. 久保田城

Instagram始めました

Facebookページ

PAGE TOP