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

    JavaScript

    縦や横に配置されたサムネイルから画像を選択できるjQueryの画像ギャラリー「KGallery」

    縦や横に配置されたサムネイルから画像を選択することができるjQuery…

  2. Excolo Slider

    JavaScript

    タッチにも対応しているシンプルなjQueryスライダー「Excolo Slider」

    タッチやマウススライドにも対応しているシンプルなjQueryスライダー…

  3. Cube-jQuery-Slider

    JavaScript

    3Dキューブなスライダーを実装できる「Cube-jQuery-Slider」

    Cube-jQuery-Sliderは、3Dキューブなスライダーを実装…

  4. Animate Transition
  5. Multipicker

    JavaScript

    要素を選択するときに直感的な操作を実現する「Multipicker」

    Multipickerは、日付や曜日、番号、その他さまざまな要素を選択…

  6. JavaScript

    サムネイルをクリックして拡大画像が見れるレスポンシブ対応のjQuery画像ギャラリー「Superbo…

    綺麗に並んだサムネイル画像をクリックして拡大画像を見ることができるjQ…

最近の記事

  1. 16インチMacBook Pro
  2. レトロスペクティブ V2.0
  3. YAECA ワイドテーパードデニム 10-13WW

アーカイブ

PAGE TOP