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」をチェックしてみてください。

plusGalleryGoogle+のような画像ギャラリーを実装できる「plusGallery」前のページ

アニメーションつきのプログレスサークルを実装できる「Grasp Mobile Progress Circle」次のページGrasp Mobile Progress Circle

関連記事

  1. jQueryを使わないコード集

    JavaScript

    jQueryを使わないでコードを書くTips集

    jQueryを使えば簡単にできることがたくさんあるんですが、ちょっとし…

  2. jquery-calendar

    JavaScript

    レスポンシブ対応でスケジュール管理もできるカレンダー「jquery-calendar」

    jquery-calendarはレスポンシブに対応したスケジュール管理…

  3. no-image

    JavaScript

    立体的なナビゲーションメニューを実装できる「Sidebar Menu Concept」

    Sidebar Menu Conceptは立体的なナビゲーションメニュ…

  4. JavaScript

    jQueryで空港や駅にある掲示板のように指定した文字が切り替わっていくAirportを使ってみた

    面白いプラグインがあったので使ってみました。空港や駅にある掲示板みたい…

  5. Cavendish.js

    JavaScript

    CSS transitionsを活用したシンプルなスライドショーを実装できるjQueryプラグイン「…

    CSS transitionsを活用したシンプルなスライドショーを実装…

  6. jQuery Autocompleter

    JavaScript

    カスタマイズ性に優れたサジェスト機能を実装できる「jQuery Autocompleter」

    jQuery Autocompleterはカスタマイズ性に優れたサジェ…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP