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

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

更新日期:2020-09-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 — 专注提供外贸网站建设 · 外贸建站 · 外贸网站制作 与 外贸建站教程

Do NOT follow this link or you will be banned from the site!
微信扫一扫
我朋友的锂电池外贸网站可与相关应用(如电摩轻骑、电动自行车、电动车等)、上下游、同行进行自然外链交换,有意向请联系我~