15分钟。基石

导航分层

在本文中，我们将向您展示如何添加和配置导航分层元素。

  1. 导航设置
  2. 设计设置
  3. 链接设置
  4. 定制
  5. 演示
  6. 总结

的导航分层元素在列布局中显示链接，如下所示:

导航分层

如果导航中存在子链接，单击父链接将通过横向转换到子菜单显示这些子链接:

导航分层

请注意，有一个回来子菜单层顶部的链接返回到前一个。要将此元素添加到您的设计中，请搜索”导航”或”分层”在元素库中拖动”导航分层”画在画布上。

导航分层

点击菜单选项卡。

导航分层菜单

以下是可用的部分:

导航分层高级设置

设置

下面的设置设置是:

  • 分配菜单-选择要用于之前设置的导航的菜单WordPress Dashboard >外观>菜单．
  • 基本字体大小—设置导航菜单的基本字体大小。
  • 子菜单触发-选择是否打开导航的子菜单锚或者是子指标也就是实际锚点旁边的箭头。
  • 返回标签-导航分层元素显示一个单独的页面导航到子链接。返回顶级链接的方法是单击回来联系．这个选项是设置链接标签的方法。
  • 当前链接-启用此选项使当前页面链接激活。活动链接样式可以因定义为粒子的颜色或下划线而不同。
  • 祖先的联系—启用该选项使当前链路的父链路激活。它将显示当前链接是否是另一个链接的子链接。
  • 图形—启用该选项，显示每个链路的图形。去WordPress Dashboard >外观>菜单并展开菜单中的每个链接，您将能够为链接选择图形。
  • 初级/次级粒子-使用粒子使活动链接具有独特的风格。您可以使用这些选项启用粒子，但要实际微调粒子，您需要使用导航分层元素的顶部面包屑来访问菜单>顶部链接>粒子或菜单>子链接>粒子．

设计设置

下唯一可用的设置设计是保证金。

导航分层设计设置

您在这里设置的页边距将影响整个菜单相对于白色画布外容器。在下面的截图中，红色框的部分是整个菜单。如果你设置前我们说，1 em，它将比之前的位置向下移动1EM。

导航分层示例

现在让我们设置链接。要查看可用设置，请单击链接选项卡。

导航分层顶部链接选项卡

你将能够看到这些可用的设置:

导航分层顶部链接设置

设置

设置控件包括:

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

Flex布局

Content Flex Layout控件包括:

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

点击在这里有关Flex布局的更多信息。

保证金

页边距布局控件包括:

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

填充

填充控件包括:

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

边境

边境管制包括:

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

边界半径

边界半径控件包括:

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

盒阴影

盒子阴影控件包括:

  • x-设置边界阴影的x轴偏移量。
  • y-设置y轴的边界阴影偏移量。
  • 模糊-设置框影的模糊。
  • 传播＆位置-设置框影的扩展和位置。
  • 颜色-设置框影的颜色。

文本设置

文本设置控件包括:

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

文本保证金

文本边距控件包括:

  • 联系方-链接边允许你链接每一个选项在保证金控制，所以当你改变一个值，所有的值都改变。或者，您可以解除边的链接，并分别设置每个边距选项。
  • 前—设置顶部边距。
  • 正确的—设置右侧空白。
  • 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 ")．这在与各种脚本和库集成时尤其有用。

演示

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

总结

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

看到不准确的东西了吗?让我们知道

Baidu
map