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

no-imageスタイリッシュなLightboxギャラリーを実装できる「Bootstrap Lightbox」前のページ

パスワードの表示・非表示を切り替えれる「Bootstrap Show Password」次のページBootstrap Show Password

関連記事

  1. simpler-sidebar

    JavaScript

    シンプルでスタイリッシュなサイドナビゲーション「simpler-sidebar」

    simpler-sidebarは、シンプルでスタイリッシュなサイドナビ…

  2. no-image
  3. jQuery Star Flashing Effect
  4. no-image

    JavaScript

    シンプルでパワフルなセレクトボックスを実装できる「SelectPage」

    SelectPageはシンプルながらも高いカスタマイズ性を備えたパワフ…

  5. Menu Droplet Animation
  6. Recursive Hover Nav

最近の記事

  1. サンクラフト ポテトング
  2. iPhone 11 Pro Smart Battery Case(ホワイト)
  3. メイソンピアソン ヘアブラシ
  4. COMOLI ベタシャンCPOシャツ(サックス)

アーカイブ

PAGE TOP