WordPress

【WordPress】素晴らしいメガメニューを構築することができるWP Mega Menu

December 12, 2017
WP Mega Menu


WP Mega MenuはWordPressサイトで実装できる素晴らしいメガメニュープラグイン。ドラッグアンドドロップツールを使用してスタイルをカスタマイズでき、ウィジェット使用、アイコン、ロゴ、検索バー、Googleフォントなどが使用できます。

WP Mega Menuプラグインを導入

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

WP Mega Menu Settings

Theme Locations to Use Mega Menu メガメニューを使用するテーマの場所
Disable Mega Menu on Mobile モバイルでメガメニューを無効にする
CSS Output Location CSSの出力場所
Menu Container Tag このタグでメニューをラップします。
Load font-awesome css in theme テーマにfont-awesome cssを読み込む
Responsive Breakpoint ブレークポイント

General Settings

Theme Title テーマタイトル
Enable Sticky Menu スティッキーメニューを有効にする
Z-index Z-インデックス
Dropdown Indicator Arrow ドロップダウンインジケータ矢印
Enable Search Bar 検索バーを有効にする

Menu Bar

Menu Align メニューの整列
Menu Bar Height メニューバーの高さ
Menu Background メニューの背景
Menu Padding メニューのパディング
Border Radius メニューバーのボーダー半径
Shadow
Menu Border 境界線の幅と色

Brand Logo

Add Logo ロゴを追加
Logo Width ロゴ幅
Logo Height ロゴの高さ
Logo Margin メニューバーの余白

First Level Menu Items

Item Text アイテムテキスト
Item Background Color アイテムの背景色
Item Background Hover Color アイテムの背景のホバーカラー
Item Padding メニューバーのパディング
Item Margin メニューバーの余白
Item Border 境界線の幅と色
Item Border Hover ホバーのボーダーの幅と色
Highlight Current Item 現在のアイテムを強調表示する

Sub Menu Items

Item Text アイテムテキスト
Item Background Color アイテムの背景色
Item Background Hover Color アイテムの背景のホバーカラー
Item Padding メニューバーのパディング
Item Margin メニューバーの余白
Item Border 境界線の幅と色
Item Border Hover ホバーのボーダーの幅と色
First Item 最初の項目
First Item Margin 最初の項目マージン
First Item Border Separator ボーダーセパレータの幅と色

Dropdown Menu

Dropdown Menu width ドロップダウンメニューの幅
Dropdown Menu Background ドロップダウンメニューの背景に透明または無地の色を設定
Menu Padding パディングをドロップダウンメニューに設定
Border Radius ドロップダウンメニューでボーダー半径を設定
Menu Border 境界線の幅と色

Mega Menu

Background Color メガメニューの背景色
Mega Menu Width メガメニューの幅を設定
Inner Padding メニューバーにパディングを設定
Border Radius メニューバーにボーダー半径を設定
Border 境界線の幅と色
Border Separator ボーダーセパレータの幅と色を設定
Box Shadow メガメニューの周囲にボックスの影を設定

Widgets

Heading Typography 見出しのタイポグラフィー
Padding パディング
Item Margin アイテムマージン
Border 境界線の幅と色
Item Border Hover ホバーのボーダーの幅と色
Content Color ウィジェットのコンテンツの色

Select Animation


アニメーションを選択します。

Mobile Menu

Toggle Button Settings トグルボタンの設定
First Level Item 第1レベルメニュー項目
Menu item Color メニュー項目の色
Menu Item Hover Color メニュー項目のホバーカラー
Menu Item Padding メニュー項目のパディング
Menu Item Margin モバイルメニューのマージンを設定
Menu Background メニューの背景色

Social Links

Enable Social Links ソーシャルリンクを有効にする
Target 新しいタブで開くかセルフタブで開くか選択
Social Color ソーシャルカラー
Social Hover Color ソーシャルホバーカラー

Export


現在のメガメニューテーマをエクスポートすることができます。

外観 >> メニュー


Mega Menu Themesでメガメニューテーマを選択します。


メニュー項目をホバーするとWP Mega Menuが表示されます。クリックするとアイコンやウィジェットなどを設定できます。


Mega Menu項目のスイッチをクリックし、YESにし、Stretchを選択します。


Add Rowをクリックし、カラムを選択します。

表示させたいウィジェットを項目からドラッグします。

Options

Upload Background Image 背景画像をアップロードする
Hide Text テキストを隠す
Hide Arrow 矢印を隠す
Disable Link リンクを無効にする
Hide Item on Mobile モバイルでアイテムを隠す
Hide Item on Desktop デスクトップ上のアイテムを隠す
Menu Item Alignment メニュー項目の配置
Dropdown alignment ドロップダウンアライメント
Icon Position アイコンの位置
Badge Text バッジテキスト

Icon

メニューを保存します。

完成

※Hestiaテーマを使用しています。

デスクトップ表示。


ウィジェットを表示。


スクロールダウンしていくとスティッキー状態になります。


モバイルメニュー表示。


展開状態。