Elementor 专业教程 8 – Nav Menu小工具的设置和使用方法

2023-11-26
Elementor 专业教程
喜欢(0)
Elementor pro Nav Menu widget

Elementor Nav Menu 小工具是在网站上添加自定义导航菜单的必备工具。

Nav Menu小工具能够创建各种类型的导航菜单,如水平菜单,垂直菜单,下拉菜单等。你只需选择并导入在Wordpress中已经创建好的菜单即可。

此外,Nav Menu小工具可以高度定制菜单样式和外观,包括字体,颜色,背景,边框等。创建高质量的菜单导航不仅提升网站的专业水平,还可以提高用户的使用体验。

本文将详细说明Nav Menu小工具的功能设置和使用方法。

Elementor Nav Menu

首先,将Nav menu小工具拖放到编辑栏内,如下图所示。

拖放小工具到编辑栏后,你会看到如下界面。

上图中的导航菜单是从Wordpress的《外观》里的《菜单》中获得的。

1.Nav Menu小工具的内容标签

Nav Menu小工具的内容标签只有Layout设置项。

1-1 Menu

Menu是选择要在导航菜单中显示的菜单设置选项。

如果你在Wordpress的菜单中创建了多个导航菜单,可以在下拉菜单中选择要显示的菜单。

上图显示的是在选择主菜单的情况下,如果选择页脚菜单,就会显示页脚菜单,如下图。

你可以看到菜单内容发生了变化。关于显示哪个菜单,可以根据设计需求来选择。

1-2 Layout

Layout是选择导航菜单的布局类型设置选项。可以选择“水平”,“垂直”,“下拉”三种布局。

  • 水平布局:菜单内容水平方向排列。导航内容少的时候推荐使用水平布局。
  • 垂直布局:菜单内容垂直方向排列。导航内容有2级或者3级内容时推荐使用垂直布局。
  • 下拉布局:菜单内容变成汉堡菜单。导航菜单多且有2级或者3级内容时推荐使用下拉布局。

水平布局和垂直布局的设置内容是一样的。但是选择下拉布局时,可设置的内容就会发生变化。如下图。

1-3 水平和垂直布局的设置

接下来先介绍“水平布局”和“垂直布局”的设置内容。可设置选项如下。

  • Align
  • Pointer
  • Animation
  • Submenu Indicator
  • Breakpoint
  • FullWidth
  • Align
  • Toggle Button
  • Icon
  • Toggle Align
● Align

Align是指定导航菜单的对齐方式设置选项,可以选择左对齐、居中对齐、右对齐或两端对齐。

● Pointer

Pointer是启用或禁用导航菜单中的指针设置选项。指针是指当鼠标悬停于菜单项时显示当前菜单项的装饰。可以在以下预设中选择指针装饰。

  • None:没有任何指针装饰
  • Underline:下划线指针装饰
  • Over line:上划线指针装饰
  • Double Line:上下划线指针装饰
  • Framed:边框指针装饰
  • Background:背景指针装饰
  • Text:文本指针装饰

具体指针装饰效果请参考下图。

● Animation

Animation是指定导航菜单指针装饰的动画效果设置选项。可以选择以下动画效果。

  • Fade:淡入
  • Slide:滑动
  • Grow:扩大
  • Drop In:自下而上进入
  • DropOut:自上而下进入
  • None:无效果

不同的指针装饰和指针动画效果相结合,可以实现多种不同的动态导航效果。

以下是下划线指针装饰加不同动画效果的视频。

● Submenu Indicator

Submenu Indicator是显示或不显示子菜单指示图标的设置选项。当显示指示图标时,表示当前菜单项包含一个下拉菜单。

默认的图标是“▼”。你可以点击现有的图标进入Elementor图标库,选择并更换其他图标。

● Mobile Dropdown

Mobile Dropdown是在Layout为“水平”或者“垂直”时显示的设置项。

主要设置手机端和平板端的显示方式和外观。

● Breakpoint

Breakpoint是指定在哪个屏幕宽度以下导航菜单将转换为下拉菜单的设置选项。

上图是在手机屏幕以下导航菜单转换为下拉菜单的效果。如果设置为平板,效果如下图。

你可以看到在平板屏幕下,导航菜单也变为下拉菜单形式。

如果在平板屏幕中将Breakpoint设置为手机屏幕以下,效果如下图。

你可以看到在平板屏幕中的导航菜单并没有显示为下拉菜单。

如果选择Breakpoint为“None”,则不会出现下拉菜单,如下图。

● 对齐(Align

对齐是用于设定下拉菜单对齐方式的选项。可以选择“侧边对齐”或“中间对齐”。

※此选项也适用于布局选择“下拉菜单”的设置。

● 切换按钮(Toggle Button)

切换按钮是选择是否在下拉菜单中使用汉堡包按钮的设置选项。

默认的按钮图标是汉堡包,但你可以从图标库中选择图标,或上传SVG图标图像来替换现有的图标。

Normol是标准状态下的按钮图标,而Active是打开下拉菜单后显示的关闭菜单按钮图标设置。Hover是当鼠标悬停在按钮上方时,可以设置按钮动画效果。

如果切换按钮选择“无”,则不会显示下拉菜单按钮,因此所有菜单将全面展示。

※此选项也适用于布局选择“下拉菜单”的设置。

● 切换对齐(Tlggle Align)

切换对齐是设定导航切换按钮对齐方式的设置选项。可以选择“左对齐”,“中对齐”,或“右对齐”。

※此选项也适用于Layout选择“Dropdown”的设置。

● 完全宽度(FullWidth)

完全宽度是选择是否启用或关闭下拉菜单全宽度显示的设置选项。默认设置为关闭。

启用后,下拉的菜单将以屏幕全宽度显示。

※此选项只适用于布局选择“下拉菜单”的设置。

2. 导航菜单小工具的样式标签

导航菜单小工具的样式标签包含以下3个设置项:

  1. 主菜单
  2. 下拉菜单
  3. 切换按钮

2-1 主菜单

主菜单包含以下设置选项:

  • 排版
  • 文字颜色(TextColor)
  • 分割线(Divider)
  • 指针宽度(Pointer Width)
  • 水平填充(Horizontal Padding)
  • 垂直填充(Vertical Padding)
  • 间距(Space Between)
● 排版

排版是自定义导航菜单的字体、大小、粗细,行高等排版设置选项。

● 文字颜色(TextColor)

文字颜色是选择和更换导航菜单文本颜色的设置选项。

可以自定义选择和替换Normal(标准状态),Hover(悬停状态),Active(当前菜单)的颜色。

Hover和Active的指针装饰颜色设置仅在内容标签的“Pointer”中选择任意指针装饰时才会出现。

Active的颜色通常用于告诉用户当前显示页面信息时使用。常用于页眉和页脚的菜单。

● 分割线(Divider)

分割线是启用或禁用导航菜单中菜单项之间的分隔符。

默认状态是禁用,启用后,就可以看到菜单项之间会出现分隔符以及下方的设置选项。

  • Style:选择分隔符的类型。可以选择“Solid”,“Double”,“Dotted”,“Dashed”。默认是Solid。
  • Width:指定分隔符的宽度。可以设置0到20之间的数值,默认是1。数值越大分隔符宽度也就越大。
  • Height:指定分隔符的高度。可以设置0到100之间的数值,默认是20。数值越大分隔符高度也就越高。
  • Color:选择和更换分隔符颜色。可以使用颜色选择器或者全局颜色设置。
● 指针宽度(Pointer Width)

指针宽度是指定导航菜单指针装饰的宽度设置选项。可以设置0到30之间的数值,默认数值是3。

● 水平间距(Horizontal Padding)

水平填充是设置导航菜单内菜单项之间水平间距的选项。

可以设置0到50的数值。默认数值是20。数值越大,菜单项之间的水平间距就越大。

● 垂直间距(Vertical Padding)

垂直填充是设置导航菜单内菜单项之间垂直间距的选项。

可以设置0到50的数值。默认数值是12。数值越大,菜单项之间的垂直间距也就越大。

● 间距(Space Between)

间距是控制导航菜单内菜单项之间空隙的设置。

功能类似于水平填充。可以设置0到100之间的数值, 默认数值为0。

结合水平填充一起使用,可以提高菜单项之间的空间间隙。如下图

2-2 下拉菜单(Dropdown)

下拉菜单的设置会根据布局的不同而不同。如下图

  • 当布局为水平或垂直时:下拉菜单指的是二级菜单
  • 当布局为下拉时:下拉菜单指的是所有菜单

下拉菜单的设置项包含以下选项。

  1. TextColor(文本颜色):选择下拉菜单中文本的颜色。
  2. BackgroundColor(背景颜色:选择和替换下拉菜单的背景颜色。
  3. 排版:自定义下拉菜单的字体、大小、粗细,行高等设置。
  4. 边框类型:选择下拉菜单的边框类型,例如实线、虚线等。
  5. 宽度(边框宽度):指定边框宽度设置
  6. 颜色(边框颜色):选择或替换边框颜色设置
  7. Border Radius(边框圆角):指定下拉菜单边框四角弧度大小设置。
  8. 盒子阴影:自定义添加下拉菜单阴影效果设置。
  9. Horizontal Padding(水平宽度):指定下拉菜单宽幅的设置
  10. Vertical Padding(垂直高度):指定下拉菜单内菜单项之间垂直间距的设置。
  11. 边框类型(分隔符):选择菜单项之间分隔符的边框类型设置。
  12. 颜色(分隔符):选择和替换下拉菜单内分隔符的颜色。
  13. Border Width(分隔符):指定下拉菜单内分隔符的宽度设置。
  14. Distance(距离):指定一级菜单和下拉菜单之间的间距设置。

2-3 切换按钮(Toggle Button)

切换按钮是自定义切换按钮样式的设置项。

切换按钮是所有布局中都有的设置项,但是当布局为“水平布局”或“垂直布局”时,需要选择内容标签的”Breakpoint“来指定设备后,切换到该设备时才能看到下拉菜单按钮。

上图是Layout选择”Dropdown“时的画面。以下就用Layout为”Dropdown“来进行说明。

  • 颜色(Color):可选择并替换切换按钮的图标颜色。
  • 背景颜色(BackgroundColor):可选择并替换切换按钮的背景颜色。
  • 大小(Size):可自定义设置切换按钮的大小。
  • 边框宽度(BorderWidth):可指定切换按钮的边框宽度。
  • 边框圆角(Border Radius):可指定切换按钮边框的圆角大小。

3.Nav Menu小工具的高级设置

高级设置是所有小工具通用的设置项,具体功能设置和使用方法请阅读《Elementor通用教程 – 高级标签的设置和使用方法

以上就是按钮小工具的功能和使用方法的说明。

希望本编内容能对您使用Elementor有帮助。

{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
fuyeshidai

做点副业,为生活加点料

Elementor pro Code Highlight widget
Elementor 专业教程 28 – Code Highlight小工具的设置和使用方法
Elementor basic 18 jindutiao.webp
Elementor 基础教程 18 - 进度条小工具的设置和使用方法
Elementor pro Template widget.webp
Elementor 专业教程 26 – Template小工具的设置和使用方法
Elementor basic 2 neibuquduan
Elementor 基础教程 2 - 内部区段 小工具的使用方法
Elementor pro price table widget
Elementor 专业教程 12 – Price Table小工具的设置和使用方法
Elementor basic 15 jibentuku.webp
Elementor 基础教程 15 - 基本图库小工具的设置使用方法
Elementor basic 9 gugeditu.webp
Elementor 基础教程 9 - 谷歌地图小工具的设置使用方法
Elementor pro Portfolio widget
Elementor 专业教程 3 – Portfolio小工具的设置和使用方法
Elementor pro Animated Headline widget
Elementor 专业教程 9 – Animated Headline小工具的设置和使用方法
Elementor basic 5 shipin.webp
Elementor 基础教程 5– 视频小工具的设置和使用方法