メガメニューを実装したいと思ったことはありませんか？
メガメニューは、たくさんの情報量を格納できるだけでなく、デザイン的な見た目も良いです。TCDでも多くのテーマでメガメニューを採用しています。
2019/06/05*情報を更新いたしました。 2020/05/02*動画解説を更新いたしました。 最近、国内ウェブサイトでもよく目にするようになったメガメニュー。メガメニューは、一般的なグローバルメニューのドロップダウンより広く領域がとられています。その為、多くの情報をひと目でわかりやすく...
ただ、テーマによってはメガメニューが採用されていなかったり、デザインが微妙だったりすることがあります。そんな時はWordPressプラグイン「Max Mega Menu」をインストールすると良いです。
無料版・有料版とありますが、無料版でも高機能になっているため、本稿では使い方を解説していきます。
機能概要
手軽にメガメニューに対応できるプラグイン「Max Mega Menu」。無料でここまでできるのは、ありがたいです。
- カスタムメニュー・ウィジェットに対応
- デザインを細かく変更できる
- アニメーションを設定できる
- モバイル時のデザイン・挙動も設定可
利用開始までの手引き
これから「Max Mega Menu」のすべての機能について解説していきますが、その大半がデザイン調整のための機能のため、メガメニューを利用するだけならすべての機能を把握する必要はありません。
次の流れで作業を進めていくことで最短でメガメニューを実装できます。
インストール
管理画面から「Max Mega Menu」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。
WordPressで制作したサイトは、プラグインを使って簡単に機能を拡張することができますよね。当記事では、プラグインのインストール方法について解説してきます。 おすすめプラグインを見る プラグインのインストール方法は2つ プラグインのインストール方法は、下記の2つになります。基本的には、...
有効化すると、WordPressダッシュボード左メニューの【設定】の下あたりに【Mega Menu】が表示されます。
機能詳細
Menu Locations
「Menu Locations」ではメガメニューの設定場所を決めます。メガメニュー化したいメニュー右横の三点リーダーをクリックします。
General Settings
プラグインを適用したいメニューに「Enabled」にチェックを入れます。
| Enabled | チェックを入れるとメガメニュー化 |
| Event | メガメニューがマウスオン・クリックで展開するかを設定 |
| Effect | フェード・スライドなどのエフェクトを選択 |
| Effect (Mobile) | スマホのエフェクト選択 |
| Theme | テーマ選択できます。無料版では「Default」しかありません。 |
Advanced
こちらはデフォルトのままで構いません。
| Click Event Behaviour | イベントをクリックした時の挙動 |
| Mobile Sub Menu Behaviour | モバイル時、メニューを閉じるタイミング |
| Mobile Sub Menu Default State | モバイル時、最初からメニューを閉じているか |
| Menu Item Descriptions | メニューの説明の出力を有効化 |
| Unbind JavaScript Events | テーマとのコンフリクトを避けるため、JavaScriptイベントを解除する |
| Prefix Menu Item Classes | カスタムメニューのクラス名の先頭に「mega-」をつけるか |
| Container | メニューのContainerに、div/navどちらを使うか |
| Active Menu Instance | 同じメニューを複数箇所で表示させる場合、何番目をメガメニュー化するか。「0」の場合はすべて。 |
Display Options
テーマにカスタムメニューの関数が含まれない場合、ここコードをコピペで利用します。
| PHP Function | header.phpなどテーマファイル内で使用 |
| Shortcode | 投稿やページで使用 |
| Widget | ウィジェットにも対応 |
Menu Themes
「Menu Themes」では主にメニューのデザインを調整できます。親・子・孫メニュー・ウィジェットと設定箇所も多いので、必要な設定だけしましょう。カスタムCSSでの指定も可能です。
General Settings
| Theme Title | テーマのタイトル |
| Arrow | メニュー開閉のアローのスタイルを選択 |
| Line Height | 行の高さ |
| Z Index | z-indexの指定 |
| Shadow | メガメニューのドロップシャドウ |
| Hover Transitions | ホバー時のトランジションを有効とするか |
| Reset Widget Styling | ウィジェットのCSSをリセット |
Menu Bar
グローバルメニュー全体・親階層の設定です。
| Menu Height | メニューの高さ |
| Menu Background | メガメニュー全体の背景色 |
| Menu Padding | メニューのパディング（余白） |
| Menu Border Radius | メニューの枠線を角丸にする設定 |
| Top Level Menu Items（親メニュー） | |
|---|---|
| Menu Items Align | メニュー文の左・右・中央寄せ |
| Item Font | メニューのフォント設定 |
| Item Font (Hover) | メニューのフォント（ホバー） |
| Item Background | メニューの背景 |
| Item Background (Hover) | メニューの背景（ホバー） |
| Item Spacing | メニュー同士の間隔 |
| Item Padding | アイテムのパディング |
| Item Border | アイテムの枠線 |
| Item Border Radius | アイテムの枠線を角丸にする設定 |
| Item Divider | メニュー間に仕切り線を表示するか |
| Highlight Current Item | ホバー部分を強調するか |
Mega Menus
子・孫階層（サブメニュー）とウィジェットの設定です。
| Panel Background | サブメニュー全体の背景色 |
| Panel Width | 親階層との横幅の比率 |
| Panel Padding | サブメニュー全体のパディング |
| Panel Border | 枠線 |
| Panel Border Radius | 枠線を角丸にする設定 |
| Column Padding | サブメニュー内のパディング |
| Widget（ウィジェット） | |
|---|---|
| Title Font | タイトルフォントの設定 |
| Title Padding | タイトルのパディング |
| Title Margin | タイトルのマージン |
| Title Border | タイトルのボーダー |
| Content Font | コンテンツのフォント設定 |
| Second Level Menu Items（子メニュー） | |
| Item Font | フォント設定 |
| Item Font (Hover) | フォント（ホバー） |
| Item Background (Hover) | 背景（ホバー） |
| Item Padding | パディング |
| Item Margin | マージン |
| Item Border | 枠線 |
| Third Level Menu Items（孫メニュー） | |
| Item Font | フォント設定 |
| Item Font (Hover) | フォント（ホバー） |
| Item Background (Hover) | 背景（ホバー） |
| Item Padding | パディング |
| Item Margin | マージン |
| Item Border | 枠線 |
Flyout Menus
「フライアウト」とは「飛び出す」の意味で、ここではメガメニュー化した部分の設定ができます。
| Sub Menu Background | サブメニューの背景 |
| Sub Menu Width | サブメニューの横幅（px） |
| Sub Menu Padding | サブメニューのパディング |
| Sub Menu Border | サブメニューの枠線 |
| Sub Menu Border Radius | サブメニューの枠線（角丸） |
| Menu Item Background | メニューの背景 |
| Menu Item Background (Hover) | メニューの背景（ホバー） |
| Menu Item Height | メニューの高さ |
| Menu Item Padding | メニューのパディング |
| Menu Item Font | フォント設定 |
| Menu Item Font (Hover) | フォント（ホバー色） |
| Menu Item Divider | メニュー間の仕切り線 |
Mobile Menus
モバイルの設定ができます。
| Responsive Breakpoint | ブレークポイント |
| Mobile Toggle Bar | |
|---|---|
| Toggle Bar Designer | トグルバーのデザイン |
| Toggle Bar Background | トグルバーの背景 |
| Toggle Bar Height | バーの高さ |
| Toggle Bar Border Radius | バーの枠線（角丸） |
| Disable Mobile Toggle Bar | トグルバーを無効にする |
| Mobile Sub Menu（モバイル サブメニュー） | |
| Overlay Content | 有効化するとコンテンツを下に押し下げてメニューを表示する |
| Force Full Width | メニューをフルサイズで表示する |
| Off Canvas Width | スライドするエフェクトを選択している場合、サブメニューの幅を指定します。 |
| Menu Item Height | メニューの高さ |
| Menu Padding | メニューのパディング |
| Menu Background | メニューの背景 |
| Menu Item Background (Active) | サブメニューを開いている時の背景色 |
| Font | フォント設定 |
| Font (Active) | サブメニューを開いている時のフォント設定 |
| Mega Menus | |
| Mega Menu Columns | モバイル時のメガメニューの列数 |
Custom Styling
| CSS Editor | カスタムCSSを入力できます。 |
General Settings
| CSS Output | CSSの出力先 |
| More options | オプション |
Tools
| Cache | ボタンをクリックするとCSSキャッシュがクリアされます。 |
| Plugin Data | プラグイン設定の初期化 |
メニューの内容を変更する
WordPressダッシュボード左メニュー【外観】→【メニュー】を開き、スタイルを変更したいメニューをホバーすると表示される「Mega Menu」（上のキャプチャ参照）をクリックします。その際に「Enable」にチェックボタンが入っていることが重要です。
レイアウトを選択します。おすすめは「Standard Layout」ですが、「Grid Layout」の方が細かい調整ができます。
| Mega Menu – Grid Layout | 列ごとにメニューを振り分けるタイプ |
| Mega Menu – Standard Layout | 列数とサイズを決めて、自動表示するタイプ |
まとめ
メガメニューが自由に使えるプラグイン「Max Mega Menu」をご紹介しました。プラグインの機能が多いため、まずはこちらの手順でメガメニューを作成してみてください。
見た目を調整する前は微妙なデザインになることが多いですが、このプラグインはCSSの知識がなくても細かい調整ができる点が良いですね。
