Ace Responsive Menu

JavaScript

レスポンシブなマルチレベルのナビゲーションを実装できる「Ace Responsive Menu」

Ace Responsive Menuは、レスポンシブに対応したマルチレベルのナビゲーションを実装することができるjQueryプラグインです。軽量で、水平、垂直、アコーディオンの3タイプのナビゲーションメニューが用意されています。

Ace Responsive Menu

デモ

横に並んだナビゲーションメニューが設置されていて、下矢印の付いたメニューにマウスオーバーすると、その下の階層のメニューが表示される仕組みです。多階層のメニューを快適に操作できるので、目的のメニューまで簡単にアクセスできますね。

ナビゲーションはレスポンシブにも対応していて、画面を縮小していくとモバイル用のハンバーガーメニューに切り替わります。右側のハンバーガーアイコンをクリックすると、ナビゲーションメニューが開閉されます。

クリックすることでメニューが表示される仕組みなので、スペースが少ないスマホなどにはピッタリのナビゲーションメニューといえそうです。

また、Ace Responsive Menuには、Horizontal Menuのほかにも、Vertical MenuとAccordion Menuも用意されています。どのメニューもパソコン、モバイルともに快適なナビゲーション操作を実現しています。

オプションには、resizeWidth、animationSpeed、accordionExpAllといったものが用意されていて、リサイズされるブレイクポイントの設定やアニメーションスピードの設定などが可能になっています。ちなみにアニメーションスピードの値は、slow、medium、fastから指定できます。

また、サポートされているブラウザは、IE 7+、Firefox 3+、Chrome 4+、Safari 4+、Opera 10+とのこと。

レスポンシブ対応でマルチレベルのナビゲーションを実装したい人は、ぜひ「Ace Responsive Menu」を活用されてみてはいかがですか?

Ace Responsive Menu

関連記事

  1. stickyNavbar.js
  2. no-image

    JavaScript

    あらかじめ設定したリストなどから複数タグを選択できる「Tokenize2」

    Tokenize2は、あらかじめ設定したリストやAjaxから複数のタグ…

  3. Viewer

    JavaScript

    画像の拡大や縮小、回転などができるイメージギャラリー「Viewer」

    Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を…

  4. Simple Easy Slider

    JavaScript

    美しいフェードスライダーを実装できるjQueryプラグイン「Simple Easy Slider」

    Simple Easy Sliderは美しいフェードアニメーションによ…

  5. PreViewTube.js
  6. Granim.js

    JavaScript

    流れるように変化するグラデーションのアニメーションを実装できる「Granim.js」

    Granim.jsは美しく変化するグラデーションのアニメーションを実装…

最近の記事

  1. iPhone 11 ProとApple Watch Hermès
  2. cheero Energy Plus mini Wireless 4400mAh
  3. cheero 2 port PD Charger
  4. 台座と紅葉
  5. ニルヴァーナ バターチキンカレー

アーカイブ

PAGE TOP