HTML / CSSで動作するアコーディオンメニュー

  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기
accordion  -  HTML / CSSで動作するアコーディオンメニュー

タイトルをクリックすると、内容が展開されてもう一度クリックすると縮小される機能を、アコーディオン(あるいは切り替え)と呼びます。 これらの機能は、サイドバーのメニュー、FAQなど様々な応用が可能です。 参考までに ああ、海のテーマで、「トグルは、一度に複数の項目を広げることができますがアコーディオンは一度に1つ広がること」を意味します。

ワードプレスのテーマでアコーディオン機能を提供する場合、テーマ機能を使用する

ワードプレスでは、アバダナ ディビのようなテーマでアコーディオンショートコードを提供して、比較的簡単にアコーディオン(トグル)機能を実装することができます。

個人的に 視覚的な作曲家をあまり好きではないが、ビジュアルコンポーザのようなページビルダーが使用されている場合、アコーディオン要素(エレメント)を使用することができます。 下の図は、 よりセブン(The7) テーマに含まれているビジュアルコンポーザーで提供されるAccordion要素を示しています。

ワードプレスアコーディオン機能

ワードプレスアコーディオンのプラグイン

テーマでアコーディオンやトグル機能を提供していない場合、プラグインを使用することも可能です。 Accordionで検索してみる様々なプラグインが検索されます。 その中から適切なものを選択することができます。

ワードプレスアコーディオンのプラグイン

アコーディオンという名前のプラグインが現在の3万個以上のサイトに設置されて使用されており、評価も良い方です。

有料プラグインでは、 Accordion FAQ WordPress プラグインというアコーディオンFAQプラグインは、ユーザーの評価が良く更新さもよくなるようです。 無料版で2%不足している場合に考慮してみることができます。

FAQページを作成したい場合は、FAQ専用のプラグインを使用することができます。 次の記事を参照してください。

jQueryを使用したアコーディオン機能

プラグインの使用が気にされる場合、jQueryを使用することも可能です。

純粋なHTML / CSSでアコーディオンメニューを実装する

jQueryやプラグインは、サイトの速度に影響を与えることができます。 速度が心配になるならば、純粋なHTML / CSSでアコーディオンメニューを実装することも可能です。 下の記事で、様々なアコーディオンメニューをHTML / CSSのみを使用して実装するコードを提供しています。

例:

注:



コメントを残す