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

    JavaScript

    タッチ対応のレスポンシブなテーブルを実装できる「tabellajs」

    tabellajsはタッチに対応したレスポンシブで操作性のよいテーブル…

  2. no-image

    JavaScript

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

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

  3. jAnimate

    JavaScript

    フリップやバウンスなどのアニメーションを要素に実装できる「jAnimate」

    jAnimateはフリップやバウンスなどといったアニメーションを要素に…

  4. Grasp Mobile Progress Circle
  5. Tooltipster

    JavaScript

    シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラグイン「Tooltipster…

    シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラ…

  6. SPOILER ALERT!

    JavaScript

    画像やテキストにボカシを入れることができるjQueryプラグイン「SPOILER ALERT!」

    画像やテキストといった部分にボカシを入れることができるjQueryプラ…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP