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

    Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」

    Google マップをとても簡単に扱えるようにしてくれるgmaps.j…

  2. hsimp

    JavaScript

    パスワードの安全性を教えてくれる「hsimp」

    hsimpは、パスワードがどれだけ安全かを判定してくれるスクリプトです…

  3. Clock Timepicker Plugin for jQuery
  4. syncscroll

    JavaScript

    2つ以上のスクロールエリアを同時にスクロールできる「syncscroll」

    syncscrollは2つ以上のスクロールエリアを同時にスクロールでき…

  5. JavaScript

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

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

  6. no-image

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP