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

    リストのテキストを1つずつ垂直にスライドさせていくjQueryのティッカー「Totem Ticker…

    おもしろいですね、これ。リスト化したli要素を1つずつ垂直方向にスライ…

  2. Flex-box Gallery

    JavaScript

    ランダムサイズの画像をかっこいいギャラリーにしてくれる「Flex-box Gallery」

    Flex-box Galleryは、ランダムサイズによる画像たちをかっ…

  3. socialShare.js
  4. Sticker.js

    JavaScript

    ペラッとめくるようなエフェクトが素敵なJSライブラリ「Sticker.js」

    画像や要素をペラッとめくるようなエフェクトを実装できるJSライブラリ「…

  5. Responsive Sidebar Navigation
  6. no-image

    JavaScript

    レスポンシブに対応したモーダルウィンドウのようなアラート実装「jquery.alert」

    jquery.alertはレスポンシブに対応したモーダルウィンドウ風の…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP