Mega menu 是什麼?

什麼是Mega Menu超級菜單?

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

最受歡迎且免費的製作Mega Menu的插件

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

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

如何製作超級菜單(Mega Menu)

安裝並啟用Elements Kit Elementor插件插件,若不會安裝插件,請查看這篇安裝插件教程

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

  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的菜單僅僅在平板和手機端可見,完美省錢?。

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *