Diviでメガメニュー(Mega Menu)作成
Avada, Enfold, Newspaper などいくつかの有料テーマにメガメニュー機能が内蔵されており、メニュー項目をクリックしたときにメニューが表示されるように作成されたメガメニューを実装することができます。 Elegant ThemesのDiviでも簡単にメガメニューを作成することができます。
Diviでメニューメニューを作成するプロセスを簡単にまとめてみると次のとおりです:
- テーマのデザイン>メニューに移動します。 (WordPress バージョンに応じて、「テーマのデザイン "の代わりに"外見 "という用語が使用されることがあります。)
- 右上部にある 「画面のオプション」(Screen Options)をクリックして、 詳細設定]メニューのプロパティを表示 下の "CSSクラス」をチェックします。
- メガメニュー形式で表示最上位のメニュー項目から「CSSクラス"に"メガメニュー"を追加します。
- これで、メニュー項目がメガメニューで動作します。
実際の動作は、 ここで確認することができます。 上記のプロセスは、次の動画で説明されているので参照してください:
ちなみに、メニュー項目にアイコンを追加する方法は、次の機会に説明します。
メガメニューをサポートしていないテーマの場合、プラグインを使用してメガメニュー機能を実装することができます。
Enfold テーマでメガメニューを使用する
人気のテーマである Enfold テーマでも簡単にメガメニューを構成することができます。 Enfoldは ルックス>メニューで、メニュー項目の 「Use as Mega Menu」(メガメニューに使用) オプションをクリックします。

これにより、次のようにMega Menuが動作します。

次の動画を参照してみてください。 (Enfold メガメニュー項目にイメージを追加する方法も説明しています。)
Avada テーマでメガメニューを使用する
WordPress 有料テーマの中で最も多く販売されているベストセラーのテーマである Avada(Avada)もメガメニュー機能はデフォルトで組み込まれています。 Avadaテーマオプションでメガメニュー設定を構成することができます。

そして、実際のメニューにメガメニュー機能を追加するには、外観>メニューから目的のメニューの1次のメニュー項目に表示される "Avada Options "をクリックします。

Avada Optoinsをクリックすると、メニューオプションが表示されます。 下部の Fusion Mega Menuのオプションを "On"に設定すると、追加で 「Full Width Mega Menu」(全幅メガメニュー)、メガメニューカラム数、Mega Menu Thumbnail(メガメニューサムネイル)という隠されたオプションが表示されます。

メガメニューオプションは、1次のメニュー項目(最上位のメニュー項目)のみの構成が可能です。
Diviテーマのメガメニューにハンバーガーのアイコンを追加する方法についての次の記事で確認することができます。
https://www.thewordcracker.com/basic/divi-%ED%85%8C%EB%A7%88%EC%9D%98-%EB%A9%94%EA%B0%80-%EB%A9%94%EB%89%B4%EC%97%90-%ED%96%84%EB%B2%84%EA%B1%B0-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0/