Accordion-menuは、jQueryとCSS3を使ったシンプルな縦型アコーディオンを実装できます。各項目をクリックすることで、それに対応したメニューが開閉されます。アニメーションも滑らかで、垂直タイプのアコーディオンなのでモバイルとの相性もよさそうですね。
Accordion-menu
以下のページからAccordion-menuのダウンロードや詳細をチェックできます。ファイルをダウンロードして実際のデモ動作をチェックすることも可能です。
Accordion-menu
デモでは、Vegetables、Fruits、Cars、Motors、Dressesと書かれたアコーディオンメニューが設置されています。各項目をクリックすると、その項目に関するメニューリストがスライドダウンで表示されます。再度クリックすると今度はスライドアップで非表示になります。
簡単な操作性で使いやすく、デザインもシンプルなのでとても見やすいアコーディオンメニューですね。また、アコーディオンが展開されている項目の横には赤い丸印が表示されているので、現在どの項目が開かれているかを瞬時に把握できます。
スライドダウン・スライドアップによるアニメーションも滑らかで使っていてとても心地良いです。また、アコーディオンは垂直に開閉するタイプなので、スマホやタブレットなど縦長のデバイスからの閲覧や操作もしやすいと思います。
複雑な機能を必要とせず、シンプルで使いやすい縦型アコーディオンを実装したい人は、ぜひ「Accordion-menu」を活用されてみてはいかがでしょうか？
