wordpress如何製作超級菜單（mega menu）

wordpress如何製作超級菜單（mega menu）

本文將介紹什麼是超級菜單、製作超級菜單的熱門免費插件、製作超級菜單的步驟教程。

什麼是超級菜單（mega menu）

什麼是超級菜單呢？相比普通菜單而言，超級菜單的展示形式更加豐富，比如菜單裡帶有圖片、視頻、多列子菜單等等，譬如下圖就是一個超級菜單，實現它需要藉助插件。如果你還不會創建菜單，請先查看如何在WordPress中製作導航菜單（7個功能點）。

最受歡迎且免費的製作mega menu的插件

最受歡迎且免費的mega menu插件是Max Mega Menu，但它不適用於使用Elementor pro製作的header的菜單。

如果使用Elementor pro製作header，那麼需要用的另一個插件Elements kit Elementor addons，它是Elementor的擴展組件，免費版就能提供mega menu功能。接下來我們用這個插件來講解mega menu的製作

如何製作超級菜單（mega menu）

安裝並啟用Elements kit Elementor addons插件，若不會安裝插件，請查看這篇安裝插件教程

進入菜單頁面，如下圖所示，

1. 選中Enable this menu for Megamenu content，
2. 在需要設計mega menu的菜單上懸停，將浮現mega menu按鈕，點擊該按鈕

1. 點擊mega menu按鈕後，將顯示下圖的彈出框，請將megamenu enabled開啟
2. 然後點擊edit megamenu content，系統會彈出elementor編輯器，請在編輯器中製作megamenu的內容，就像用elementor製作頁面的方法一樣

如下圖所示，我隨意製作了一個mega menu實例，記得點擊update保存，然後點擊左上角的x關閉界面回到菜單頁面。

最後依次點擊彈出層上的save按鈕，點擊保存菜單。

接下來請將elementor的header模板中的導航元素換成Elements kit Elementor addons提供的導航元素，即下圖中帶有ekit標記的nav menu元素，否則megamenu也不能生效。

最後訪問網站看一下效果，如下圖所示，將滑鼠放到products上，下方即刻浮現剛才製作的mega menu。

需要注意的是，megamenu不適合手機端，而Elements kit Elementor addons插件必須付費升級到PRO才能控制手機端不顯示megamenu，這並不意味著我們要付費。

我們可以通過elementor編輯header，新增一個setion放移動端的菜單，按下圖所示，用可見性開關控制菜單在不同設備上的可見性。譬如將有megamenu的菜單僅僅在桌面端可見；而沒有megamenu的菜單僅僅在平板和手機端可見，完美省錢。