【WordPress】レスポンシブ対応のメガメニュープラグインMax Mega Menu

max_mega_menu_s
Max Mega MenuはWordPressのメガメニュープラグイン。メニューはドラッグ&ドロップ、レスポンシブ、ウィジェット表示、フェードまたはスライドトランジションなどカスタマイズオプションも豊富です。

Max Mega Menuプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> Max Mega Menuを検索
有効化にするとMega Menuが追加されます。

General Settings

max_mega_menu_1

Click Event Behaviour イベントの挙動をクリック
Mobile Menu Behaviour モバイルメニュー挙動
CSS Output CSS出力

Menu Themes

max_mega_menu_2

Theme Title テーマタイトル
Arrow 矢印
Line Height 行の高さ
Z Index Zインデックス
Shadow
Hover Transitions ホバートランジッション
Reset Widget Styling ウィジェットのスタイルをリセット

Menu Bar

Menu Height メニューの高さ
Menu Background メニューの背景
Menu Padding メニューのパディング
Menu Border Radius メニューの半径
Menu Items Align メニューアイテムの位置
Menu Item Background メニューアイテムの背景
Menu Item Background (Hover) メニューアイテムの背景(ホバー)
Menu Item Spacing メニューアイテムのスペース
Font フォント
Font (Hover) フォント(ホバー)
Menu Item Padding メニューアイテムのパッディング
Menu Item Border メニューアイテムの線
Menu Item Border (Hover) メニューアイテムの線(ホバー)
Menu Item Border Radius メニューアイテムの線の半径
Menu Item Divider メニューアイテムの周り
Highlight Current Item 現在の項目をハイライト

Mega Menu

Panel Background パネルの背景
Panel Width パネルの幅
Panel Padding パネルのパディング
Panel Border パネルの線
Panel Border Radius パネルの線の半径
Item Padding アイテムパディング
Heading Font 見出しのフォント
Heading Padding 見出しのパディング
Heading Margin 見出しのマージン
Header Border ヘッダーの線
Content Font コンテンツのフォント

Second Level Menu Items

Font フォント
Font (Hover) フォント(ホバー)
Background (Hover) 背景(ホバー)
Padding パディング
Margin マージン
Border

Third Level Menu Items

Font フォント
Font (Hover) フォント(ホバー)
Background (Hover) 背景(ホバー)
Padding パディング

Flyout Menus

Menu Background メニュー背景
Menu Width メニュ0の幅
Menu Padding メニューのパディング
Menu Border メニューの線
Menu Border Radius メニューの線の半径
Item Background アイテムの背景
Item Background (Hover) アイテムの背景(ホバー)
Item Height アイテムの高さ
Item Padding アイテムのパディング
Item Font アイテムのフォント
Item Font (Hover) アイテムのフォント(ホバー)
Item Divider アイテムの周り

Mobile Menu

Toggle Bar Designer トリガーバーデザイン
Responsive Breakpoint レスポンシブブレイクポイント
Toggle Bar Background トリガーバーの背景
Disable Mobile Toggle モバイルトリガーを無効
Toggle Bar Height トリガーバーの高さ
Mega Menu Columns メガメニューカラム
Menu Background メニュー背景
Menu Item Height メニューアイテムの高さ

Menu Locations

max_mega_menu_3
登録されたメニューの表示場所を設定。

Tools

max_mega_menu_4

Cache キャッシュ
Plugin Data プラグインデータ
Export Theme エクスポートテーマ
Import Theme インポートテーマ

外観 >> メニュー

max_mega_menu_6
Enableで有効化にし、Event、Effect、Themeは任意で変更してください。特に変更する箇所はないかと思います。

max_mega_menu_5
位置の管理で表示させるメニュー位置を合わせておきます。

max_mega_menu_7
メニューを入れていきます。メニューをホバーするとMega Menuというボタンが表示されます。

Mega Menu

max_mega_menu_8
親メニューの場合のみ表示。カラムを矢印で調整できたり、ウィジェットを入れる場合は右側のSelect Widget to add ~をクリックし、挿入したいウィジェットを選択。

Settings

max_mega_menu_9
メニュー項目の設定などが行えます。

Icon

max_mega_menu_11
メニューの前にアイコンを表示できます。

max_mega_menu_12
完成。
max_mega_menu_10
ブラウザ幅を狭めました。アイコン、ウィジェットはなくしています。

 
Max Mega Menu

【WordPress】レスポンシブ対応のメガメニュープラグインMax Mega Menu

  • LATEST
  • RELATED
  • POPULAR