傳統的普通選單通常採用簡潔的下拉式設計，適用於內容較少或結構較簡單的網站。
但隨著資訊量的增加和使用者需求的多樣化，超級選單（Mega Menu）應運而生，成為組織和展示豐富內容的理想選擇。
超級選單透過分組和多列佈局，能夠在一個下拉介面中呈現更多的資訊和功能，幫助訪客更快速地找到所需內容，提升網站的易用性和轉換率。
與普通菜單相比，超級菜單不僅能夠展示更多的導航選項，還能整合圖標、圖片甚至是互動元素，使得網站導航更加直觀和富有吸引力。
來一張圖說明可能會更直觀，比如說像下面這樣子的是超級選單：
透過Elementor這款功能強大的頁面建立工具，我們可以輕鬆建立自訂的超級選單，滿足外貿建站的複雜需求。
本篇Elementor教學將展示使用Elementor製作功能全面且視覺吸引力的超級選單。
在開始之前，你需要
- ElementsKit Elementor Addons插件
- Elementor Pro插件
安裝ElementsKit Elementor Addons插件
我們在插件市場中安裝ElementsKit插件，如果你不懂如何安裝WP插件可以看這篇教學。
安裝成功以後我們啟用該插件。
然後進行簡單的配置，我們啟用Mega Menu。
然後滑鼠滑動到下方，確保啟用ElementsKit Nav Menu。
這邊我們就已經配置好製作超級選單（Mega Menu）所需的功能了。
開始創建超級選單
我們在WordPress後台建立一個新選單。本教學建立超級選單跟著建立普通下拉選單是在WordPress後台的同一個地方，都是在Appearance （外觀）–> Menu （選單）中去操作，只是具體步驟不一樣。
勾選“Enable this menu for Megamenu content”，建立好一級欄目，然後點擊Save Menu儲存。
我們在上一步點擊Save Menu儲存新選單以後，WordPress會給我們自動刷新該頁面。
此時我們滑鼠移動到一級欄位就會多出一個「Mega Menu」的按鈕，點選該「Mega Menu」按鈕。
對此一級欄位啟用Mega Menu功能，然後點選Save儲存，最後點選EDIT MEGAMENU CONTENT，進入到Elementor的視覺化編輯模式。
此時會開啟一個視窗化的Elementor編輯視口，我們點擊下圖中的ElementsKit圖標，選擇使用一個Mega Menu模板來幫助我們快速建立超級選單。
我們點選左側的Category下拉框，篩選Mega Menu範本。
找到我們喜歡的超級選單樣式後，點擊「Insert」插入即可使用ElementsKit模板。我這邊選了一個如下圖的模板。
我們可以像製作頁面一樣使用Elementor的容器來製作我們的超級選單，而且可以根據自己的需求進行樣式的調整。
在本教學下面會教你們怎麼去繼續優化超級選單的樣式。
調整完以後點選右上角的Publish發布超級選單。
在Header中使用超級選單
我們如果想要在Header中使用剛剛製作的Mega Menu，我們需要確保我們網站的Header是使用Elementor來製作的。
然後，用Elementor開啟網站的Header，點選左上角的「+」號，找到ElementsKit Nav Menu小部件，替換掉我們原有的選單。
然後在ElementsKit Nav Menu小工具的設定中選擇剛建立的Mega Menu。
然後我們就可以看到我們剛製作的超級選單實作並展示在前端了，點擊右上角Publish即可應用在Header上。
如果我們想讓Mega Menu全螢幕顯示，我們可以這樣設定：
全螢幕超級選單的顯示效果：
優化超級選單樣式
搭建好骨架之後，我們根據自己的需求優化超級選單的樣式。
我們可以先去Dribbble上面去找一個喜歡的Mega Menu樣式來參考，例如：
拿到參考後，我們就照做普通頁面的方式去拆解和搭建即可。若你還不熟悉Elementor，建議先看這篇《Elementor 容器與佈局教學》。
裡面會詳細說到怎麼一步步使用Elementor來建立複雜、專業的頁面效果。
課程裡的案例比這個Mega Menu更複雜；當你了解容器與佈局的工作原理，實現上面那個超級選單的效果可謂是易如反掌。