javafx 带图片的按钮菜单_wordpress如何制作超级菜单（mega menu）

2024-05-07 07:34:26

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

什么是超级菜单(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插件，若不会安装插件，请查看这篇安装插件教程

进入菜单页面，如下图所示，

选中Enable this menu for Megamenu content，
在需要设计mega menu的菜单上悬停，将浮现mega menu按钮，点击该按钮

点击mega menu按钮后，将显示下图的弹出框，请将megamenu enabled开启
然后点击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的菜单仅仅在平板和手机端可见，完美省钱。

javafx 带图片的按钮菜单_wordpress如何制作超级菜单（mega menu）相关推荐

javafx 带图片的按钮菜单_怎么制作ICON图标图片转ICON图标方法
怎么制作ICON图标图片转ICON图标方法?接下来就与大家分享一下,有关利用软件制作ICON图标的方法,同时也介绍利用相关转换工具实现图片转ICON的方法. 方法/步骤首先,我们需要借助如图所示的 ...
javafx 带图片的按钮菜单_flash怎么调透明度-Adobe flash调整图片透明度的方法
Adobe flash是一款用于创建动画和多媒体内容的强大软件,该软件内含丰富的工具集,具有排版精确.版面保真和强大的动画编辑功能,在多种设备中都能呈现一致效果的互动体验,使用起来非常方便.我们在使用 ...
自定义Android带图片的按钮
自定义Android带图片的按钮前言现在移动设备的按钮设计讲究大图标小文字,希望用户只要一看到图标便能知道这个按钮是干嘛的,但又要有必要的文字提示,最常见的就数搜索按钮了,上面一个大大的放大镜图标 ...
flutter图标按钮_flutter 按钮封装带图片的按钮,带边框的按钮,纯文字的按钮
在项目中使用的时候,发现系统按钮并不符合我的需求,所以我把常用的按钮,按照我自己的理解,封装了一个! 供大家参考,如果有建议,可以评论提出! 十分感谢! 只有文字的button /* *只有文字的bu ...
带图标和按钮切换特效的垂直导航菜单的html页面源码
大家好,今天给大家介绍一款,带图标的垂直导航菜单的html页面源码(图1).送给大家哦,获取方式在本文末尾. 图1 点击每个按钮时,都有切换特效,并显示按钮的说明,看起来非常不错(图2) 图2 代码完 ...
汉堡包菜单_7种制作“汉堡包”菜单图标的非光栅方法
汉堡包菜单无论您是否喜欢俗气的名字,似乎臭名昭著的"汉堡包"菜单图标都将保留在这里-至少要持续一段时间. 在本教程中,我们将介绍在不使用光栅图像的情况下创建和样式化此类图标的多种 ...
自定义Android带图片和文字的ImageButton
自定义Android带图片的按钮前言现在移动设备的按钮设计讲究大图标小文字,希望用户只要一看到图标便能知道这个按钮是干嘛的,但又要有必要的文字提示,最常见的就数搜索按钮了,上面一个大大的放大镜图标 ...
用VB实现带图片的XP风格的按钮控件
虽然在VB里实现XP风格很简单,但是要使用XP风格同时又让按钮显示图片,则实现起来要麻烦一些,为此,我写了一个控件来实现前述功能,同时让读者可以从中了解XP主题界面的绘制过程. 使用办法很简单,在VB ...
按钮 toast android,Android Toast使用方法（普通提示和带图片的提示）
Toast 是一种非常方便的消息提示框,有两个特点: 1.Toast提示信息不会获取焦点. 2.Toast提示信息过一段时会自动消失. 使用方法比较简单,一般通过以下步骤: 1.调用Toast构造器或 ...

最新文章

热门文章