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. Text Scramble Effect

    JavaScript

    テキストをスクランブルしながら表示していく「Text Scramble Effect」

    Text Scramble Effectはテキストをカシャカシャとスク…

  2. JavaScript

    レスポンシブで横スクロールやキーボード操作も可能なjQueryギャラリー「Portfoliojs」

    ポートフォリオなどでとても素敵なイメージギャラリーを実装することができ…

  3. Nivo Lightbox

    JavaScript

    Lightbox系のレスポンシブ対応のjQueryプラグイン「Nivo Lightbox」

    シンプルでレスポンシブにも対応しているLightbox系のjQuery…

  4. JavaScript

    とても簡単にクールなドロップダウンを実装できるjQueryプラグイン「DropKick」

    個人的に使いやすそうだったので備忘録です。DropKickというjQu…

  5. ajSlider

    JavaScript

    シンプルでさりげないアニメーションが素敵なスライドショー実装「ajSlider」

    ajSliderはシンプルなスライドショーを実装することができるjQu…

  6. Los Scrollos

    JavaScript

    シンプルで滑らかな水平スクロール実装「Los Scrollos」

    Los Scrollosはシンプルで滑らかな水平スクロールを実装できる…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6

アーカイブ

PAGE TOP