StellarNav.js

JavaScript

レスポンシブで多階層に対応したドロップダウンメニュー「StellarNav.js」

StellarNav.jsはjQueryによるレスポンシブで多階層に対応したかっこいいドロップダウンメニューを実装することができるプラグインです。操作もシンプルで使いやすい多階層に対応したドロップダウンメニューを自サイトに取り入れたい人にはピッタリですね。

StellarNav.js

StellarNav.js

デモでは横一列にナビゲーションメニューが表示されています。各メニュー項目の横に矢印のアイコンがついているメニューには、マウスオーバーすることでその下にある階層のメニューが表示される仕組みになっています。

マウスオーバーしていくことで、どんどん深い階層にあるメニューを表示していくことができるので、とてもメニューへのアクセス性がいいですね。

また、StellarNav.jsはレスポンシブにも対応しているので、ブラウザ幅を縮小していくとナビゲーションメニューがモバイル版のレイアウトに変化します。

モバイル版ではメニューが一つにまとまり、クリックすることでメニューの中身を開閉できるようになっています。

各メニューの横に「+」のアイコンが表示されているメニューでは、クリックすることでその下にある階層のメニューを表示させることが可能です。

PC版での使い勝手のよさはもちろん、モバイルフレンドリーにもなっているので、さまざまなデバイスから快適にナビゲーションメニューを操作できます。

マークアップもシンプルだしオプションもいくつか用意されているのがうれしいですね。主なオプションは、theme、breakpoint、phoneBtn、locationBtn、sticky、position、showArrows、closeBtn、scrollbarFixです。

モバイル版へ切り替えるブレイクポイントはオプションのbreakpointから指定することができます。自サイトに合わせてカスタマイズしたい人にも最適です。

というわけで、レスポンシブ対応で多階層にも対応したドロップダウンメニューを実装したい人は、ぜひ「StellarNav.js」をチェックしてみてください。

関連記事

  1. Select.js

    JavaScript

    セレクトボックスをオシャレにスタイリングしてくれるJS・CSSライブラリ「Select.js」

    Select.jsはセレクトボックスをシンプルでオシャレにスタイリング…

  2. Simple Lightbox
  3. JavaScript

    シンプルで軽量のレスポンシブなjQueryスライダー「ResponsiveSlides.js」を使っ…

    とてもシンプルで使いやすそうなレスポンシブのjQueryスライダー「R…

  4. no-image

    JavaScript

    テキストに応じてアンダーラインが伸び縮みする「Magic Line Menu」

    Magic Line Menuはナビゲーションメニューのテキストに応じ…

  5. Stretchy Navigation

    JavaScript

    ナビゲーションメニューが伸び縮みする「Stretchy Navigation」

    Stretchy Navigationはクリック、タップをすることで伸…

  6. jQuery GoUp!

    JavaScript

    ページ上部にスクロール移動してくれる「jQuery GoUp!」

    jQuery GoUp!は、ページ上部にスクロール移動してくれるシンプ…

最近の記事

  1. COMOLIの製品染ナイロン アノラックとトラックパンツ
  2. WH-XB900N
  3. Eufy RoboVac L70 Hybrid
  4. cheero Smart USB Charger 48W CHE-320

アーカイブ

PAGE TOP