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. star-rating-svg

    JavaScript

    カスタマイズ性に優れたレーティング(星評価)実装「star-rating-svg」

    star-rating-svgは、SVGを使用したカスタマイズ性に優れ…

  2. jQuery Sidebar

    JavaScript

    上下左右からクイックなスライド表示させることができるjQuery Sidebar

    jQuery Sidebarは上下左右からスライド表示させることができ…

  3. stickyNavbar.js
  4. JavaScript

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラグイン「SHARDS」

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラ…

  5. Scrollgress

    JavaScript

    スクロールに連動するプログレスバーを実装できる「Scrollgress」

    Scrollgressはスクロールに連動するシンプルで軽量なプログレス…

  6. simpleDialog

    JavaScript

    レスポンシブ対応のシンプルなポップアップ・ダイアログを実装できる「simpleDialog」

    simpleDialogはレスポンシブに対応したポップアップ・ダイアロ…

最近の記事

  1. パーソナルパーティション
  2. 200-DGBG020

アーカイブ

PAGE TOP