水平、垂直和汉堡布局
桌面、平板电脑和手机的布局单独设置。水平适合顶部栏。垂直有四种类型:普通带侧面下拉、切换、手风琴和侧面,将菜单固定到页面边缘。手机默认使用汉堡包切换。通过 Pro,您可以选择任意宽度的汉堡包,然后将菜单打开为默认下拉、弹出窗口或 Offcanvas 面板。
- 每个设备设置的布局,包括 Elementor 的额外断点。
- 垂直菜单如普通菜单、切换菜单、手风琴菜单或侧面菜单。
- 使用 Master Addons Pro 弹出窗口和 Offcanvas 汉堡菜单。
- 与一起工作 巨型菜单 多柱面板的扩展。
垂直菜单布局:普通菜单、切换菜单、手风琴菜单和侧面菜单
Layout 中选择垂直,并出现第二个控件 Type,每个类型以不同的方式打开子菜单,并且每个设备都可以设置 Layout 和 Type,因此菜单可以在桌面上保持正常,并在手机上切换到 Accordion。
- 正常 当读者悬停其父项时,打开列表一侧的子菜单。
- 切换 单击时在其父菜单下扩展子菜单,并且多个子菜单可以同时保持打开状态。
- 手风琴 单击时也会展开,但打开一个子菜单会关闭打开的子菜单。
- 侧 pin菜单到页面边缘,只有主要的项目坐在栏里,它们的子菜单在旁边的一个面板中打开。
正常:子菜单在悬停时向侧面打开。
切换:子菜单在其项目下展开。
手风琴:一次打开一个子菜单。
侧面:页面边缘栏中的主要项目,旁边的面板中的子菜单。
样式每个菜单级别和状态
Style 选项卡有主菜单项、下拉菜单、下拉菜单项、下拉子菜单和下拉子菜单项的单独部分,每个部分都获得正常、悬停和活动状态的颜色和背景,加上填充、边框和分隔符,因此当前页面的链接看起来可能与其他页面不同。
- 主要项目和下拉项目的正常、悬停和活动状态。
- 下拉面板、其项目和更深的子菜单的单独样式。
- 物品之间的分隔符,包括类型、尺寸和颜色。
汉堡切换和指示图标
Style the hamburger 切换为图标、文本或两者兼而有之,具有默认、堆叠或框架视图以及正方形或圆形形状,它可以在菜单关闭时显示一个图标,在打开时显示另一个指示图标,标记有下拉和子菜单的项目:选择自己的图标,显示或隐藏它们,并设置它们的大小、颜色、位置和旋转。
- 汉堡包切换为图标、文本或两者兼而有之。
- 关闭和打开菜单的不同图标。
- 自定义下拉和子菜单指示符图标(带旋转)。
下拉间距和每台设备的布局
从菜单顶部设置下拉宽度及其间隙,项目与每个链接内部填充之间的间隙。过渡持续时间控制悬停颜色和下拉变化的速度。由于布局是按设备设置的,因此您可以决定菜单从水平栏切换到垂直列表,或切换到带有 Pro 的汉堡包。
- 从顶部下降宽度和间隙。
- 项目和链接填充之间的间隙,方便点击。
- 悬停和下拉更改的转换持续时间。
Elementor Pro 菜单小部件与主插件导航菜单
Elementor的免费插件没有用于放置和设计WordPress菜单的小部件,其菜单和WordPress菜单小部件附带了Elementor Pro,以下是它们之间的比较。
| 元素专业版 | 主插件导航菜单 | |
|---|---|---|
| 价格 | Elementor Pro 许可证 | 包含在主插件中;带有 Pro 的弹出式和画外汉堡类型 |
| 布局 | 水平、垂直、下拉 | 水平、垂直(4 种)、汉堡包 |
| 移动菜单 | 切换到您选择的断点以下 | 默认情况下手机上的汉堡包;带有 Pro 的弹出窗口和画外画 |
| 每个设备的布局 | 一断点设置 | 为每个设备设置 |
| 悬停指针动画 | 是的 | 否 |
| 超级菜单 | 带有下拉内容的菜单小部件 | 超级菜单扩展 |
如果您已经为 Elementor Pro 付费,则其菜单小部件可以完成这项工作。没有它,导航菜单和 巨型菜单 扩展程序为您提供没有 Elementor Pro 的样式标头菜单。
导航菜单一览
小部件的作用,请从主插件 3.2。3 读取。
| 物品 | 导航菜单小部件 |
|---|---|
| 菜单源 | "外观"、"菜单"中的任何菜单, 在"选择菜单"中选择 |
| 布局 | 每个设备上都是水平和垂直的;默认情况下,汉堡包在手机上 |
| 垂直类型 | 正常、切换、手风琴和侧面 |
| 汉堡在桌面和平板电脑上 | 硕士插件专业版 |
| 汉堡类型 | 手机默认;使用 Pro 的弹出窗口和画外线 |
| 子菜单 | 下拉、其项目、更深的子菜单及其项目的单独样式部分 |
| 国家 | 主项目和下拉项目的正常、悬停和活动 |
| 指示图标 | 您选择的降压和子菜单图标,包括尺寸、颜色、位置和旋转 |
| 悬停指针动画 | 否(元素人Pro的菜单小部件有它们) |
| 粘的 | 小部件中没有设置;使集管容器粘稠 |
| 巨型菜单面板 | 超级菜单扩展 |
| 需求 | Elementor 和主插件,无 Elementor Pro |
导航菜单示例
Widget构建的五个实时演示。打开一个,然后从下面的模板查看器导入布局。
- 木炭导航栏和大型菜单:带有多列巨型菜单面板的深色标题栏。
- 带有顶部栏的导航菜单:主菜单上方的接触条。
- 下拉菜单变化:同一菜单上的几种下拉样式。
- 垂直导航菜单:菜单作为垂直列表。
- 垂直侧菜单:固定在页面边缘的侧面类型。
如何在 Elementor 中添加导航菜单
该小部件使用您在 WordPress 中构建的菜单,因此请从那里开始。
Nav 菜单的常见问题
这与其他 Nav 菜单小部件有何不同?
Elementor自己的菜单小部件需要Elementor Pro。Master Addons Nav菜单运行时没有Elementor Pro,并添加了每台设备的布局、四种垂直菜单类型、每个菜单级别和状态的单独样式、自定义指示图标和可风格化的汉堡包切换器。它还适用于Mega菜单扩展。
我可以使用此菜单和 Mega 菜单扩展名吗?
是打开Mega菜单扩展,从WordPress菜单屏幕中构建菜单项的面板内容,然后在Nav菜单小部件中选择该菜单,该小部件显示前端的mega菜单面板。
设置正常、悬停和活动的不同样式是否困难?
号打开样式选项卡,选择菜单的一部分,如主菜单项,并在正常,悬停和活动选项卡之间切换,以设置每个状态的颜色。
如何编辑小部件中显示的菜单?
WordPress菜单的小部件显示, 所以你编辑它下外观, 菜单。添加, 重命名或重新排序项目在那里并保存。小部件中的选择菜单控件有一个直接链接到该屏幕, 并且更改显示在Elementor刷新后。
如何添加子菜单?
在外观,菜单,在它所属的项目下,将项目向右拖动一点,直到WordPress将其标记为子项目,然后保存。小部件显示为下拉。在样式、下拉菜单和下拉菜单项中对其进行样式。
我在没有 Pro 的情况下是否会在手机上购买汉堡菜单?
是的。在手机上,小部件默认切换到汉堡包,菜单在切换器下方打开到位。在桌面或平板电脑上使用汉堡包,或将其打开为弹出窗口或 Offcanvas 面板,需要 Master Addons Pro。
"画外"或"弹出"菜单类型的最佳用例是什么?
Pro汉堡两种,Offcanvas从左边或右边把菜单滑进去,适合手机和极简的设计,Popup在页面上打开菜单,在投资组合或代理站点上全站导航效果很好,没有Pro,手机上的汉堡在切换下打开菜单到位。
该菜单适用于我现有的 WordPress 主题标头吗?
Elementor运行的任何地方都可以放置小部件,要完全替换主题标头,请用免费构建标头模板 主插件主题生成器 并向其添加导航菜单小部件。
我可以在移动设备与桌面设备上采用不同的菜单风格吗?
Yes。layout,对齐和很多样式设置,每个设备都可以设置,比如桌面上保持一个横杆,平板上使用垂直手风琴,手机上使用汉堡包切换。
我可以让菜单粘吗?
Widget 没有粘性设置,所以改用头部容器粘性,有了 Elementor Pro,就用高级、运动效果、粘性:顶在那个容器上,没有 Pro,就加 selector { position: sticky; top: 0; z-index: 99; } 到主插件自定义 CSS 部分中的容器。我们的 粘性标题指南 涵盖全套设置。
为什么我的菜单不显示?
Check四件事,小部件需要选择菜单中选取的菜单,站点在外观,Menus下至少需要一个菜单,一个头模板只显示其显示条件适用的位置,在手机上菜单折叠到汉堡包中,因此检查切换颜色是否从头背景中脱颖而出最后,清除您的缓存和更改后的任何JavaScript延迟设置。
![Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
