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

no-imageプレーンなJavaScriptによるレスポンシブなLightbox「jsOnlyLightbox」前のページ

コンテナのサイズに合わせて要素を動的に拡大・縮小できる「Scalable」次のページno-image

関連記事

  1. no-image

    JavaScript

    軽量・高速でレスポンシブ対応のjQueryスライダー「partialViewSlider」

    partialViewSliderは左右にスライドする軽量・高速でレス…

  2. JavaScript

    要素の位置までスクロールしてスピード設定もできるjQueryプラグイン「scrollToBySpee…

    scrollToBySpeedは指定した要素の位置までスクロールしてく…

  3. ARIA TOOLTIP

    JavaScript

    WAI ARIAを活用したユーザーフレンドリーなツールチップ実装「ARIA TOOLTIP」

    ARIA TOOLTIPはWAI ARIAを活用したユーザーフレンドリ…

  4. Zebra_Tooltips

    JavaScript

    シンプルでスマートなツールチップを実装できる「Zebra_Tooltips」

    Zebra_Tooltipsは軽量でシンプルなツールチップを実装できる…

  5. Scrolla

    JavaScript

    スクロール時にアニメーションするjQueryプラグイン「Scrolla」

    Scrollaは上下スクロールしたときにアニメーションするjQuery…

  6. jquery.simple-scroll-follow

最近の記事

  1. 長十郎
  2. COMOLI シルクネルシャツ
  3. WiMAX
  4. 甘柿
PAGE TOP