no-image

JavaScript

jQueryとCSS3を使った縦型アコーディオン「Accordion-menu」

Accordion-menuは、jQueryとCSS3を使ったシンプルな縦型アコーディオンを実装できます。各項目をクリックすることで、それに対応したメニューが開閉されます。アニメーションも滑らかで、垂直タイプのアコーディオンなのでモバイルとの相性もよさそうですね。

Accordion-menu

Accordion-menu

デモでは、Vegetables、Fruits、Cars、Motors、Dressesと書かれたアコーディオンメニューが設置されています。各項目をクリックすると、その項目に関するメニューリストがスライドダウンで表示されます。再度クリックすると今度はスライドアップで非表示になります。

簡単な操作性で使いやすく、デザインもシンプルなのでとても見やすいアコーディオンメニューですね。また、アコーディオンが展開されている項目の横には赤い丸印が表示されているので、現在どの項目が開かれているかを瞬時に把握できます。

スライドダウン・スライドアップによるアニメーションも滑らかで使っていてとても心地良いです。また、アコーディオンは垂直に開閉するタイプなので、スマホやタブレットなど縦長のデバイスからの閲覧や操作もしやすいと思います。

複雑な機能を必要とせず、シンプルで使いやすい縦型アコーディオンを実装したい人は、ぜひ「Accordion-menu」を活用されてみてはいかがでしょうか?

no-imageシンプルで美しい軽量のjQueryモーダルウィンドウ「umodal」前のページ

レスポンシブ対応のシンプルなLightboxプラグイン次のページno-image

最近の記事

  1. SILENT HILL 2
  2. FUNLOGY スピーカー
  3. 聖剣伝説 VISIONS of MANA
  4. エルデの追憶
  5. コーヒー豆
PAGE TOP