受团队信任
添加、自定义和重用导航栏。
在这节课中:
添加一个导航栏。
你可以把导航栏放在你网站的任何地方——这样做没有对错之分。因为导航栏是独立的，你可以随时随地移动它。
导航栏是页面上一组元素居中的容器。
让我们在导航栏上添加一个logo。
头的资产面板在左边的面板设计师在这里您可以上传和管理资产。点击“云的图标，然后选择要上传的文件。您可以将您的标志图像拖到品牌链接．
将品牌形象或标志链接回主页是一种标准做法。要做到这一点:
导航栏的第二个组件是导航菜单。这个组件保存我们的导航链接。默认情况下，导航栏有3个导航链接占位符，您可以编辑、删除或添加。
添加更多的导航链接:
添加导航链接的另一种方法是复制并粘贴已经应用了类的导航链接。这是一个伟大的节省时间，如果你计划样式多个导航链接。要做到这一点:
当复制此导航链接时，该类已应用于您粘贴的每个新链接。您可以双击nav链接来编辑里面的文本。
将每个导航链接链接到不同的源:
导航栏元素在样式方面非常灵活。
在本节中，我们将专注于给予我们这种控制的3个领域:
导航栏元素没有预设的宽度或高度值。您可以在样式面板中调整这些值。
当你将导航条放到主体、section或其他元素中时，它将占据该元素的全部宽度。您可以通过设置来水平收缩导航栏宽度或通过限制其父元素的宽度(with汽车保证金在导航栏上设置居中)。您还可以添加保证金到导航栏(结合一个最大宽度或汽车的宽度）更改与导航栏周围元素的关系。
导航栏的高度由里面的内容决定——要么是品牌标志的高度，要么是导航链接的高度。你可以通过以下方法调整导航栏的高度:
通过选择一个导航链接并调整顶部和底部的填充，可以为导航链接添加填充。导航链接和导航条的大小相应地调整。您还可以添加空白来达到类似的效果。
更统一的方法可能是选择导航栏并调整其填充。增加填充可以增加高度，因为它在导航栏和容纳所有导航栏元素的容器之间创建了额外的空间。
您还可以对在较小的断点上单击导航菜单时出现的导航下拉菜单进行类似的更改。您可以通过选择平板电脑断点中的导航栏并单击来访问导航下拉菜单菜单>显示在设置面板．
在触控设备断点上调整导航链接的高度非常有帮助，可以确保你的点击目标足够大，适合手指点击。了解更多关于导航栏菜单按钮的信息．
这就是类帮很多忙。类保存样式信息，您可以将其应用于整个站点中任意数量的元素。当您开始样式化一个元素时，就会自动创建一个类并将其应用到所选的元素。对这个元素所做的所有样式调整都保存在这个类中。控件中输入类名，还可以手动创建类(在添加样式之前)选择字段的风格的面板．
您可以访问选择字段三种方法中的一种:
现在，我们可以对每个导航链接应用相同的类，因此样式的更改会影响导航栏中的所有链接。
通过改变导航链接在不同状态下的外观，比如默认状态和悬停状态，可以直观地指示与导航链接的交互。访问州菜单，选择一个导航链接并打开风格的面板>选择字段，然后单击下拉菜单(如果已经有一个类应用到nav链接，则该下拉菜单可用)。了解更多关于州的信息．
要表示鼠标悬停在导航链接上，最简单的方法之一就是在悬停时改变颜色。这可以是导航链接背景的颜色变化，也可以是导航链接文本的颜色变化。
控件中的导航链接添加背景色徘徊状态:
当用户将鼠标悬停在nav链接上时，这个背景将是可见的。
对每个导航链接应用相同的类，因此对该类的更改会同时影响导航栏中的所有链接。
的菜单按钮导航栏中的一个元素，当水平空间有限时，它组织导航链接，例如在移动设备上。它有时被称为汉堡包菜单。菜单按钮及其功能内置在导航栏元素中，可以通过多种方式访问和配置。
默认情况下，导航菜单按钮将出现在平板电脑的断点和以下。当你切换到这些设备时，你可以打开预览模式，看到菜单出现在导航栏中。单击菜单按钮将展开导航菜单。再次单击菜单按钮将折叠导航菜单。
在桌面断点上，可以看到nav链接嵌套在nav菜单元素中。这个导航菜单与在较小的断点上单击菜单按钮时在垂直列表中显示导航链接的元素相同。
您可以在设计器中按以下步骤打开导航菜单:
设计器将自动切换到平板电脑断点以打开导航菜单。
导航栏菜单按钮最初出现在平板电脑的断点中，但您可以更改此按钮，使其在所有断点上可见或不可见:
将导航栏转换为符号可以方便地在整个站点中使用。将导航栏转换为符号可以让您快速重用和编辑导航栏的所有实例。
要创建导航栏符号:
一旦你创建了一个符号，符号的主模式就会打开。主模式中的所有更改都将级联到该符号的所有实例中。可以通过双击该符号的任何实例进入主模式。了解更多符号知识．
现在我们可以在网站的任何地方重用相同的导航栏元素。
首先,打开符号面板，然后单击并拖动导航栏符号到您的网站的任何页面。就像任何元素一样，您可以将符号直接放在画布上或导航器更多的精度。
当您选择一个符号的实例时，您将看到它被高亮显示并用绿色勾勒出来。打开风格的面板查看该符号在您的站点中有多少个实例。
首先，我们要确保导航条是body元素的直接子元素。为什么?因为我们想让它在滚动时保持在顶部。粘性定位会让导航条粘在页面的顶部，而其余的内容会滚动。当你滚动回页面顶部时，导航条会重新定位到页面顶部。
将导航栏设置为sticky。
重要的是:至少在粘性元素的一侧设置一个值，以确保粘性位置工作。
位置固定从文档流中删除元素，因此导航栏将悬浮在整个页面之上。我们不希望在导航栏还在初始位置时发生这种情况，因为它会重叠元素。我们只希望导航栏保持固定，并在滚动时浮动在其他元素之上。
另一方面，位置粘将元素保持在文档流中，并且只有当元素的初始位置被滚动掉时才将其设置为固定位置。因此，导航栏完全停留在你放置它的地方，没有重叠的相邻元素。当你开始滚动过去时，它就会固定在视口上。
有时，即使你将位置设置为sticky，并为元素的一侧定义了距离值，位置粘性仍然不起作用。出现这种情况的原因有很多:
如果位置距离值设置在不受滚动影响的一侧，位置粘性可能不起作用。例如，如果您在左侧或右侧设置距离，并且您在页面中垂直滚动，则元素不会粘在一起。
如果您设置了到底部的距离，而不是顶部，并且您的元素对齐到父元素的顶部，它也不会工作——它要么是父元素的第一个元素，要么是通过flex或网格对齐设置对齐到顶部。
下拉菜单是一个预先构建的导航元素，几乎可以添加到网站的任何区域。通常你会在网站的导航栏中看到一个下拉元素。
在添加面板>组件，您可以将下拉元素拖到站点中所需的位置。
在单击下拉列表之前，下拉列表不可见。您可以通过转到设置面板并单击菜单>显示．了解关于下拉元素的更多信息．
默认情况下，下拉列表在用户单击下拉切换时出现，但您可以使它在用户单击下拉切换时出现徘徊在上的下拉切换悬停时打开菜单选择。的关闭延迟时间(鼠标悬停后关闭下拉列表所需的时间)可以以毫秒为单位进行调整。
这是创建一个带下拉菜单的导航栏。不错的工作!
