导航内联

要添加此元素，搜索“navigation”并在画布上拖动“navigation Inline”。

您将能够配置整个Element，它的各个链接，它的子菜单下拉菜单和子菜单项。让我们从元素的设置开始讨论所有这些。

导航设置

点击菜单选项卡。

可用的第一个节/字段组是设置部分，其中包括以下选项:

设置

设置控件中的选项包括:

• 分配菜单-选择用于导航的菜单。
• 基本字体大小-设置导航使用的基本字体大小。
• 调整自我-如何排列菜单项。例如，如果将“对齐自我”设置为“拉伸”，菜单链接将占据整个菜单的高度。如果Align Self设置为Start，菜单链接将对齐到顶部，在链接的正下方留下空间。

设计设置

对象可用的其他节/字段组菜单TAB，这是设计部分。设计包含以下字段组:Margin, Self Flex, Flex Layout和Items Flex。

保证金

页边距布局控件包括:

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

自我Flex

Self Flex控件包括:

• 预设-预设灵活选项，帮助您轻松对齐您的内容。选项包括标准，不收缩，填充空间，填充空间均等。
• Flex成长-定义一个弹性项目的能力增长，如果有必要。要了解关于Flex Grow的更多信息，请查看这篇文章．
• Flex收缩-确定当行上没有足够的空间时，相对于伸缩容器中的其他伸缩项，伸缩项将收缩多少。要了解关于伸缩收缩的更多信息，请查看这篇文章．
• Flex为基础-指定伸缩项的初始大小，在根据伸缩因子分配任何可用空间之前。要了解更多关于Flex Basis的信息，请查看这篇文章．

Flex布局

Flex Layout控件包括:

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

Flex项目

Flex控件的Items包括:

• 预设-预设灵活选项，帮助您轻松对齐您的内容。选项包括标准，不收缩，填充空间，填充空间均等。
• Flex成长-定义一个弹性项目的能力增长，如果有必要。要了解关于Flex Grow的更多信息，请查看这篇文章．
• Flex收缩-确定当行上没有足够的空间时，相对于伸缩容器中的其他伸缩项，伸缩项将收缩多少。要了解关于伸缩收缩的更多信息，请查看这篇文章．
• Flex为基础-指定伸缩项的初始大小，在根据伸缩因子分配任何可用空间之前。要了解更多关于Flex Basis的信息，请查看这篇文章．

Top Links设置

现在我们来讨论一下上面的链接．顶部链接是主菜单项，如下所示:

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

下面是可用的字段组顶部链接:

设置

设置控件包括:

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

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。

下拉菜单设置

下一个是下拉。点击下拉选项卡。

所谓的“下拉菜单”是子菜单项的容器，如下所示:

以下是可用的字段选项:

设置

安装控件包括:

• 字体大小-下拉菜单使用的字体大小。
• 宽度-下拉框的宽度。
• 背景—下拉菜单的背景。On单击一个颜色选择器打开。

第一下拉边距

第一个下拉边距布局控件包括:

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

下拉边境

下拉边框控件包括:

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

下拉边框半径

下拉边框半径控件包括:

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

下拉填充

下拉填充控件包括:

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

下拉框阴影

盒子阴影控件包括:

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

子链路设置

下一个是子的链接．点击子的链接选项卡。

所谓的“subblinks”是子菜单项的容器，如下所示:

以下是可用的字段选项:

设置

设置控件包括:

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

Flex布局

Content Flex Layout控件包括:

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

保证金

页边距布局控件包括:

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

填充

填充控件包括:

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

边境

边境管制包括:

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

边界半径

边界半径控件包括:

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

盒阴影

盒子阴影控件包括:

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

文本设置

文本设置控件包括:

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

文本保证金

文本边距控件包括:

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

主要文本格式

主要文本设置控件包括:

• 字体-主要文本的字体选择器。默认是继承，或者你可以在字体管理器中选择一个设置好的字体。
• 字体粗细-所选主字体的字体粗细。可用的权重取决于所选字体系列。
• 字体大小
• 字符间距
• 行高

主要文本样式

主要文本样式控件包括:

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

主文本阴影

主要文本阴影控件包括:

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

辅助文本格式

主要文本设置控件包括:

• 字体-辅助文本的字体选择器。默认是继承，或者你可以在字体管理器中选择一个设置好的字体。
• 字体粗细-所选次要字体的字体粗细。可用的权重取决于所选字体系列。
• 字体大小
• 字符间距
• 行高

次要文本样式

次要文本样式控件包括:

• 字体样式—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 ")．这在与各种脚本和库集成时尤其有用。

演示

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

总结

现在您知道了如何使用导航内联元素添加内联菜单。您已经了解了可用于自定义主链接(顶部链接)、下拉菜单和子菜单项设计的各种设置。有了这些基本知识，您几乎可以实现任何漂亮的导航，而不涉及任何代码。