本文将介绍什么是超级菜单、制作超级菜单的热门免费插件、制作超级菜单的步骤教程。

什么是超级菜单(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的菜单仅仅在平板和手机端可见，完美省钱。