导航下拉

要添加导航下拉元素，只需搜索“navigation”并将“navigation下拉菜单”拖到画布上。

导航设置

设置

在Setup下唯一的选项是:

分配菜单-选择用于导航的菜单。

活动链接设置

唯一的设定设置是:

• 分配菜单-选择要用于之前设置的导航的菜单WordPress仪表盘>外观>菜单．

活动链接设置

• 当前链接-启用此选项使当前页面链接激活。活动链接样式可以因定义为粒子的颜色或下划线而不同。
• 祖先的联系—启用该选项使当前链路的父链路激活。它将显示当前链接是否是另一个链接的子链接。
• 图形—启用该选项，显示每个链路的图形。去WordPress仪表盘>外观>菜单并展开菜单中的每个链接，您将能够为链接选择图形。
• 初级/次级粒子-使用粒子使活动链接具有独特的风格。你可以使用这些选项来启用粒子，但实际上要微调粒子，你需要使用导航折叠元素的顶部面包屑来访问菜单>链接>粒子．

开关设置

触发下拉列表显示的按钮称为切换按钮。这个按钮可以根据您的喜好进行配置。

单击切换标签，如下所示…

．.．将显示给您的设置可用在您的处置。

在设置如上图所示的字段组，你将能够设置切换按钮的实际高度和宽度，它的最小和最大尺寸，当它没有悬停时它的背景颜色。的基本字体大小字段指定切换按钮的大小。如果你增加它，整个按钮的大小也会增加。

的Flex布局字段组允许您配置切换按钮的flexbox设置。如果你不熟悉Flexbox，本指南会帮助你的。

的边距，填充，边界，边界半径而且盒阴影字段组在大多数元素中都是常见的，我不会在这里详细说明它们。

现在默认情况下，切换按钮内有一个“汉堡包”图形。您可以选择删除图标并使用文本代替。要做到这一点，你需要转变在的文本设置并将从的图形的设置．

当你转身在的文本设置，其他字段/设置将出现，这将允许您设置主要文本，次要文本，间距＆顺序以及如何处理交互和溢出。

您还会注意到，现在有几组选项可供您使用，例如:

• 文本保证金
• 主要文本格式
• 主要文本样式
• 主文本阴影
• 辅助文本格式
• 次要文本样式
• 辅助文本阴影

所有这些都允许您自定义文本(包括主要文本和次要文本)的外观。

文本保证金

文本边距控件包括:

• 联系方-链接边允许你在边距控制内链接每个选项，这样当你改变一个值时，所有值都会改变。或者，您可以解除边的链接，并分别设置每个边距选项。
• 前—设置顶部边距。
• 正确的-设置右边边距。
• Bttm—设置底部边距
• 左—设置左侧空白。

主要文本格式

主要文本设置控件包括:

• 字体-主要文本的字体选择器。默认为继承，也可以选择设置在字体管理器．
• 字体粗细-所选主字体的字体粗细。可用的权重取决于所选字体系列。
• 字体大小
• 字符间距
• 行高

主要文本样式

主要文本样式控件包括:

• 字体样式—Normal或斜体
• 文本对齐-左，中，右，右。
• 文本装饰-划线或划线。
• 文本转换-大写(强制所有文本为大写)，大写(强制每个单词的第一个字母为大写)，小写(强制所有文本为小写)。
• 文本颜色-提供两种选择。1:底色，设置文本的底色。2:交互。设置与(悬停时)等交互时的文本颜色。

主文本阴影

主要文本阴影控件包括:

• x-设置文本阴影的X轴偏移量。
• y-设置Y轴的文本阴影偏移量。
• 模糊-设置文本阴影的模糊。
• 传播＆位置-设置文本阴影的扩散和位置。
• 颜色—设置文本阴影的颜色。

如果你想同时拥有图标和文本呢?这可能吗?一个响亮的YES!简单地启用(或打开)文本设置和图形设置，你会有他们都出现在切换按钮。

想要改变“汉堡包”图形?这很简单，你有多种方法来做。

1. 从类型下拉菜单中选择图形切换。

2. 如果没有一种图形切换类型适合您的需要，返回到图形设置，然后单击类型字段上的标志图标。

然后进入图形图标，在主菜单上选择一个图标＆次要的领域。

3. 最后，你可能想要使用你自己的形象。要做到这一点，回到图形设置和点击中间的按钮类型。

然后转到主图形图像，然后单击源上的方框。

然后选择要使用的图像。

下拉菜单设置

这就是所谓的下拉列表:

首先，单击下拉选项卡查看设置。

然后你会发现这些选项:

下拉选项是一组控制组，用于微调导航下拉元素的下拉特性。我们将深入研究细节并解释每个选项的功能。

设置

• 字体大小-使用此选项设置下拉菜单的基本字体大小。
• 宽度-使用此选项设置下拉菜单的宽度。
• 背景—设置下拉菜单的背景颜色。

第一下拉边距

使用此选项可设置下拉框的边距。您可以更改下拉菜单的所有边的设置，或者单独修改它们。

下拉边境

使用此选项可设置下拉框的边框。您可以设置风格，宽度而且颜色边境线的所有边或每边的边境线。

下拉边框半径

使用此选项可为下拉菜单设置边框半径。您可以在下拉菜单的所有边设置曲线，也可以单独设置曲线。

下拉填充

使用此选项可设置下拉框的填充。您可以更改下拉菜单的所有边的设置，或者单独修改它们。

下拉框阴影

• x-使用此选项在下拉菜单中设置阴影的X偏移量。
• y-使用此选项在下拉菜单中设置阴影的Y偏移量。
• 模糊-使用此选项在下拉阴影中设置模糊效果的强度。
• 传播和定位-使用此选项设置下拉阴影的扩散量，并决定您希望阴影位于框内还是框外。
• 颜色-使用此选项设置下拉阴影的颜色。

链接设置

现在我们来讨论一下链接．链接为主菜单项，如下图所示:

要配置它们，请单击链接选项卡。

下面是可用的字段组链接：

设置

设置控件包括:

• 基本字体大小-用于顶部链接的字体大小。
• 宽度＆高度—链路的宽度和高度可以更改为任何需要的值。
• 最小宽度＆高度-链接的最小宽度和高度。
• 最大宽度＆高度—链路的最大宽度和高度。
• 背景-提供了两个选项，一个叫基础，基础是任何时候的背景色，除了悬停。第二个选项叫做交互交互是鼠标悬停时链接的背景色以及与链接交互时的背景色。

Flex布局

Content Flex Layout控件包括:

• 布局—选择“行”或“列”
• 改变布局
• 把孩子们
• 水平
• 垂直

保证金

页边距布局控件包括:

• 联系方-链接边允许你在边距控制内链接每个选项，这样当你改变一个值时，所有值都会改变。或者，您可以解除边的链接，并分别设置每个边距选项。
• 前—设置顶部边距。
• 正确的-设置右边边距。
• 底—设置底部边距
• 左—设置左侧空白。

填充

填充控件包括:

• 联系方-链接边允许你链接填充控件中的每个选项，这样当你改变一个值时，所有值都会改变。或者，您可以取消连接边，并单独设置每个填充选项。
• 前—设置顶部边距。
• 正确的—设置右侧页边距。
• 底—设置底部边距。
• 左—设置左侧空白。

边境

边境管制包括:

• 联系方-允许您连接所有方面的边界控制，或解除连接方面，以单独控制每个边界方面。
• 风格-设置边框的样式，如虚线，虚线等。
• 宽度-设置边界的宽度默认像素。或者点击PX来改变你想要使用的单位(EM, REM)
• 颜色—设置边框的颜色。

边界半径

边界半径控件包括:

• 联系方-链接边界的所有方面，以同时控制所有边界半径选项，而不是单独配置每个值。如果你把两边分开。您可以单独设置边界半径控件。
• 左上角-设置边界的左上方半径。
• 右上方-设置边框的右上方半径。
• Bttm正确-设置边框的右下角半径。
• Bttm左-设置边界的左下角半径。注意:除非你已经设置了边界控制，否则你不会看到任何改变边界半径值的效果。

盒阴影

盒子阴影控件包括:

• x-设置边界阴影的X轴偏移量。
• y-设置Y轴的边界阴影偏移量。
• 模糊-设置盒子阴影的模糊。
• 传播＆位置-设置盒子阴影的扩散和位置。
• 颜色—设置框阴影的颜色。

文本设置

文本设置控件包括:

• 启用-一个简单的打开或关闭选项设置为关闭，如果你想要图标链接
• 文本溢出—设置“文本溢出”为“启用”。
• 主要的文本-链接的主要文本。
• 二级文本-在主文本下添加辅助文本。默认为空(无输出)。

文本保证金

文本边距控件包括:

• 联系方-链接边允许你在边距控制内链接每个选项，这样当你改变一个值时，所有值都会改变。或者，您可以解除边的链接，并分别设置每个边距选项。
• 前—设置顶部边距。
• 正确的-设置右边边距。
• Bttm—设置底部边距
• 左—设置左侧空白。

主要文本格式

主要文本设置控件包括:

• 字体-主要文本的字体选择器。默认为继承，也可以选择设置在字体管理器．
• 字体粗细-所选主字体的字体粗细。可用的权重取决于所选字体系列。
• 字体大小
• 字符间距
• 行高

主要文本样式

主要文本样式控件包括:

• 字体样式—Normal或斜体
• 文本对齐-左，中，右，右。
• 文本装饰-划线或划线。
• 文本转换-大写(强制所有文本为大写)，大写(强制每个单词的第一个字母为大写)，小写(强制所有文本为小写)。
• 文本颜色-提供两种选择。1:底色，设置文本的底色。2:交互。设置与(悬停时)等交互时的文本颜色。

主文本阴影

主要文本阴影控件包括:

• x-设置文本阴影的X轴偏移量。
• y-设置Y轴的文本阴影偏移量。
• 模糊-设置文本阴影的模糊。
• 传播＆位置-设置文本阴影的扩散和位置。
• 颜色—设置文本阴影的颜色。

图形的设置

图形设置控件包括:

• 启用—启用或禁用图形输出。当图形设置设置为开启时，您将在图形设置控件中看到另一个选项，以及另外两组名为图形边距和图形图标的控件。
• 类型-选择哪种类型的图形，你想使用图标，图像或切换。仅显示“启用”是否设置为“开启”。

图形边缘

图形边距控件包括:

• 联系方-链接边允许你在边距控制内链接每个选项，这样当你改变一个值时，所有值都会改变。或者，您可以解除边的链接，并分别设置每个边距选项。
• 前—设置顶部边距。
• 正确的-设置右边边距。
• Bttm—设置底部边距
• 左—设置左侧空白。

图形图标

图形图标控件只有当你在图形设置控件中选择了图标选项时才会显示，并且该控件包括:

• 字体大小＆二次-如果你选中“次要”框，你会看到一个名为“次要图标”的新选项。
• 宽度＆高度—图标的宽度和高度
• 颜色-提供两种选择。1:底色，设置图标的底色。2:交互。设置与(悬停时)等交互时的图标颜色。导航菜单的图标设置在WordPress管理员>外观>菜单．

子指标设置

子指示器设置控件包括:

• 启用-输出一个子指示器(on)或不输出一个子指示器(off)，子指示器是用于子导航链接，并显示您是否有父链接的子链接。
• 字体大小-用于子指示器的字体大小。
• 宽度＆高度—子指示灯的“宽度”和“高度”默认为“auto”。
• 图标—图标选择器选择一个图标作为子指示灯。
• 色彩基础—子指示灯不交互时的底色。
• 颜色交互-当与子指示器交互时(点击，悬停等)使用的颜色。

分指标裕度

子指标边距布局控件仅显示子指标设置设置为开启且包含以下内容:

• 联系方-链接边允许你在边距控制内链接每个选项，这样当你改变一个值时，所有值都会改变。或者，您可以解除边的链接，并分别设置每个边距选项。
• 前—设置顶部边距。
• 正确的-设置右边边距。
• Bttm—设置底部边距
• 左—设置左侧空白。

交互设置

交互设置控件包括:

• 文本-文本交互，文本在悬停时如何变化。可用选项包括:无、顶部滑动、左侧滑动、右侧滑动、底部滑动、向上缩放、向下缩放、翻转X、翻转Y。
• 图形-图形交互，鼠标悬停时图形如何变化。可选选项包括:无、放大、缩小、翻转X、翻转Y。
• 粒子当你启用主要或次要粒子时，你会看到粒子设置的新控件和选项。这允许您添加粒子效果悬停，伟大的使您的菜单脱颖而出!

初级粒子设置

主要粒子设置控件包括:

• 位置-主粒子效果显示的地方。
• 放置-主粒子效果将显示相对于切换。
• 规模＆延迟-无论是规模X，规模Y或规模一直与延迟秒的效果。
• 转换从以下开始-效果转换发生的地方。

主要粒子样式

主要粒子样式控件包括:

• 宽度＆高度-粒子的宽度和高度。
• 半径＆颜色-粒子效果的半径以及它的原色。
• 内联CSS-任何你想应用到粒子效果的内联CSS。

二次粒子设置

次要粒子设置控件包括:

• 位置-次要粒子效果显示的地方。
• 放置-次要粒子效果将显示相对于切换。
• 规模＆延迟-无论是规模X，规模Y或规模一直与延迟秒的效果。
• 转换从以下开始-效果转换发生的地方。

二级粒子样式

次要粒子样式控件包括:

• 宽度＆高度-粒子的宽度和高度。
• 半径＆颜色-粒子效果的半径以及它的次要颜色(用于交互)。
• 内联CSS-任何你想应用到粒子效果的内联CSS。

定制

自定义窗格由各种功能组成，允许您进一步控制元素的样式和功能:

• ID - - - - - -在元素上设置HTML ID。
• 类 - - - - - -在元素上设置HTML类。
• 元素的CSS - - - - - -使用此特性可以增加对Element的风格控制，特别是对嵌套标记的控制。点击在这里有关此特性的详细信息，如使用el美元来动态地定位基本标签，等等。
• 在断点期间隐藏 - - - - - -当需要改变设计时，以不同的屏幕尺寸隐藏元素。点击在这里获取更多信息。
• 条件 - - - - - -当满足某些条件时，从页面中添加/删除元素。”如果设置了特色图像…”)．点击在这里获取更多信息。
• 自定义属性 - - - - - -使用此选项将自定义HTML属性添加到元素的根标记(例如:data-info = " 123 ")．这在与各种脚本和库集成时尤其有用。

演示

要查看导航下拉元素的现场演示，请单击在这里．

总结

现在你知道了如何使用导航下拉元素添加下拉导航，你已经了解了各种可用的设置，所以你可以自定义它来满足你的偏好。