ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2020年11月14日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기
HTML / CSSで動作しているアコーディオンメニュー2

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

WordPress テーマでアコーディオン機能を提供する場合、テーマ機能を使用する

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

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

WordPress アコーディオン機能

WordPress アコーディオンのプラグイン

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

WordPress アコーディオンのプラグイン

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

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

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

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

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

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

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

例:

メモ:



コメントを残す

コメント