专注于外贸建站,分享WordPress教程和Elementor教程

如何制作WordPress超级菜单(mega menu)

更新日期:2021-07-20

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

什么是超级菜单(mega menu)

什么是超级菜单呢?相比普通菜单而言,超级菜单的展示形式更加丰富,比如菜单里带有图片、视频、多列子菜单等等,譬如下图就是一个超级菜单,实现它需要借助插件。如果你还不会创建菜单,请先查看如何在WordPress中制作导航菜单(7个功能点)

mega-menu

最受欢迎且免费的制作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按钮,点击该按钮
mega-menu-tutorial
  1. 点击mega menu按钮后,将显示下图的弹出框,请将megamenu enabled开启
  2. 然后点击edit megamenu content,系统会弹出elementor编辑器,请在编辑器中制作megamenu的内容,就像用elementor制作页面的方法一样
mega-menu-tutorial-2

如下图所示,我随意制作了一个mega menu实例,记得点击update保存,然后点击左上角的x关闭界面回到菜单页面。

mega-menu-tutorial-3

最后依次点击弹出层上的save按钮,点击保存菜单。

mega-menu-tutorial-4

接下来请将elementor的header模板中的导航元素换成Elements kit Elementor addons提供的导航元素,即下图中带有ekit标记的nav menu元素,否则megamenu也不能生效。

mega-menu-tutorial-5

最后访问网站看一下效果,如下图所示,将鼠标放到products上,下方即刻浮现刚才制作的mega menu。

mega-menu-tutorial-6

需要注意的是,megamenu不适合手机端,而Elements kit Elementor addons插件必须付费升级到PRO才能控制手机端不显示megamenu,这并不意味着我们要付费。

我们可以通过elementor编辑header,新增一个setion放移动端的菜单,按下图所示,用可见性开关控制菜单在不同设备上的可见性。譬如将有megamenu的菜单仅仅在桌面端可见;而没有megamenu的菜单仅仅在平板和手机端可见,完美省钱?。

mega-menu-tutorial-7

制作megamenu菜单的教程到此结束~ヾ(•ω•`)o

点赞
0 / 5 5

Your page rank:

教程 分类

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关 教程

我自用的 建站资源

当你点击本站的链接购买主机、主题、插件,我会得到一些佣金用于运营网站,但不会影响你的购买价格,我只推荐自己在用的,感谢有你的支持~比心( •̀ ω •́ )y

Namesilo

注册域名,购买时使用优惠券loyseo可减1美元
前往注册→

siteground logo
SiteGround

购买外贸建站主机,它是80%读者的选择
了解详情→

Astra

易用又轻快的WordPress主题,含超多免费模板
了解详情→

elementor logo gradient 01 1
Elementor

最热门的网页可视化设计编辑器,我的网站就是用它建的
了解详情→

Hi~当你点击本站中的主机、主题、插件的链接前往购买后,我将获取一些佣金,这是我撰写建站教程的主要收入~希望也能得到你的支持,比心( •̀ ω •́ )y

Copyright © LOYSEO.COM — 专注提供外贸网站建设 · 外贸建站 · 外贸网站制作 与 外贸建站教程