メガメニューを実装したいと思ったことはありませんか?

メガメニューは、たくさんの情報量を格納できるだけでなく、デザイン的な見た目も良いです。TCDでも多くのテーマでメガメニューを採用しています。

ただ、テーマによってはメガメニューが採用されていなかったり、デザインが微妙だったりすることがあります。そんな時はWordPressプラグイン「Max Mega Menu」をインストールすると良いです。

無料版・有料版とありますが、無料版でも高機能になっているため、本稿では使い方を解説していきます。

機能概要

Max Mega Menu

手軽にメガメニューに対応できるプラグイン「Max Mega Menu」。無料でここまでできるのは、ありがたいです。

  • カスタムメニュー・ウィジェットに対応
  • デザインを細かく変更できる
  • アニメーションを設定できる
  • モバイル時のデザイン・挙動も設定可

利用開始までの手引き

これから「Max Mega Menu」のすべての機能について解説していきますが、その大半がデザイン調整のための機能のため、メガメニューを利用するだけならすべての機能を把握する必要はありません。

次の流れで作業を進めていくことで最短でメガメニューを実装できます。

  1. プラグインを有効化
  2. メガメニュー化するメニューを選ぶ
  3. メニューの内容を設定
  4. デザインを調整する

インストール

管理画面から「Max Mega Menu」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。

Max Mega Menu

有効化すると、WordPressダッシュボード左メニューの【設定】の下あたりに【Mega Menu】が表示されます。Max Mega Menu

機能詳細

Menu Locations

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
「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

General Settings

CSS Output CSSの出力先
More options オプション

Tools

Tools

Cache ボタンをクリックするとCSSキャッシュがクリアされます。
Plugin Data プラグイン設定の初期化

メニューの内容を変更する

Custom Menu

WordPressダッシュボード左メニュー【外観】→【メニュー】を開き、スタイルを変更したいメニューをホバーすると表示される「Mega Menu」(上のキャプチャ参照)をクリックします。その際に「Enable」にチェックボタンが入っていることが重要です。

Max Mega Menu

レイアウトを選択します。おすすめは「Standard Layout」ですが、「Grid Layout」の方が細かい調整ができます。

Mega Menu – Grid Layout 列ごとにメニューを振り分けるタイプ
Mega Menu – Standard Layout 列数とサイズを決めて、自動表示するタイプ

まとめ

メガメニューが自由に使えるプラグイン「Max Mega Menu」をご紹介ししました。プラグインの機能が多いため、まずはこちらの手順でメガメニューを作成してみてください。

  1. プラグインを有効化
  2. メガメニュー化するメニューを選ぶ
  3. メニューの内容を設定
  4. デザインを調整する

見た目を調整する前は微妙なデザインになることが多いですが、このプラグインはCSSの知識がなくても細かい調整ができる点が良いですね。