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. funnyText.js
  2. jquery.resizeend

    JavaScript

    ウィンドウをリサイズした時にイベント発生できる「jquery.resizeend」

    jquery.resizeendは、ブラウザのウィンドウをリサイズした…

  3. ARIA TOOLTIP

    JavaScript

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

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

  4. tabellajs

    JavaScript

    タッチ対応のレスポンシブなテーブルを実装できる「tabellajs」

    tabellajsはタッチに対応したレスポンシブで操作性のよいテーブル…

  5. Animate Transition
  6. Justified Gallery

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP