初学者基础：顶吧-优快云博客

本文详细介绍了Foundation框架中的顶部栏组件，包括其基本结构、如何添加父链接和子菜单、其他设置以及如何整合搜索输入和面包屑导航。顶部栏组件在不同屏幕尺寸下表现良好，提供了一个灵活且易于使用的导航解决方案。

让我们看一下Foundation框架中包含的顶部栏。由于涉及的内容很多，我们将其分解为简单的块。

顶栏或无顶栏

Foundation的顶部栏是一个非常有用的小组件，但绝不是必须在构建中使用它。我估计我在使用Foundation构建的项目中约有40％使用了它。仔细考虑它是否适合您的项目需求；顶部栏组件的样式与其他组件一样容易，但是交互设置非常好。

基本结构

要开始构建顶部栏，我们需要一个<nav>标记，其必需的类为“ top-bar”。

里面有一个<ul>和两个<li> ，其中一个将保存我们的标题/徽标，另一个是我们的“移动”菜单。

注意：如果您希望只显示两个菜单之一，则可以删除“菜单图标”类或内容“菜单”。

<nav class="top-bar">
    <ul class="title-area">
        <li class="name">
             <h1><a href="#">Top Bar Title </a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>
        </li>
    </ul>
</nav>

添加父链接

添加父链接是我们的下一个目标，因此在关闭nav标签之前，请添加带有“ top-bar-section”类的<section> 。在本节中，我们需要添加具有多个列表项的无序列表。

Foundation有一个有用的类“ divider”，可以将其应用于空列表项，从而使您可以用引人注意的行分隔每个菜单链接。在以下示例中使用它们来划分菜单链接。

您还将注意到ul对其应用了“ left”类，该类将事物发送到左侧。例如，您可以有两组菜单链接，一组向左浮动，另一组（使用“ right”类）向右浮动。

<section class="top-bar-section">
	<ul class="left">
		<li class="divider"></li>
		<li class="active"><a href="#">Main Item 1</a></li>
		<li class="divider"></li>
		<li><a href="#">Main Item 2</a></li>
		<li class="divider"></li>
	</ul>
</section>

到目前为止，我们添加的所有链接都将沿着该栏水平显示。在较小的屏幕上，它们将成为一个下拉菜单，由我们之前添加的“菜单”按钮激活。

添加子菜单

每个列表项都可以包含子菜单的嵌套无序列表。为了使其正常工作并正确显示，必须将“ has-dropdown”类应用于父链接，而将“ dropdown”类应用于嵌套的无序列表：

<li class="has-dropdown"><a href="#">Main Item 3</a>
	<ul class="dropdown">
		<li><label>Dropdown Level 3 Label</label></li>
		<li><a href="#">Dropdown Level 3a</a></li>
		<li><a href="#">Dropdown Level 3b</a></li>
		<li class="divider"></li>
		<li><a href="#">Dropdown Level 3c</a></li>
	</ul>
</li>
<li class="divider"></li>

注意：要将当前页面链接标记为活动，请添加“活动”类。

在“大屏幕”情况下，子菜单显示为标准下拉菜单。在较小的屏幕上，它们从“关闭屏幕”滑入。

其他设置

尽管被称为“顶部”栏，您仍可以将此组件放置在布局中的任何位置。如果需要滚动条使其在页面上保持固定，则可以将顶部条包装在具有“固定”类的div中。或者，如果要将顶部栏保留在主容器中，则可以使用“包含网格”类将顶部栏的宽度设置为网格宽度。幸运的是，您可以组合使用这两个类（“包含网格”和“固定”类）。

假设您希望顶部栏位于版式的中心，但是当用户向下滚动时，需要该栏保持在页面顶部。通过将顶部栏包装在“包含到网格”和“粘性”类中，可以实现此目的。

<div class="contain-to-grid sticky">
	<nav class="top-bar">
		<!--nav content-->
	</nav>
</div>

添加搜索输入

如果所有这些方便的功能还不够用，您可能还想添加一个可用于搜索，邮件列表注册或所需的输入。在菜单列表项中添加表单元素时，我们需要添加一个“具有表单”类。您可以从下面的代码中看到，我们实际上是在顶部栏中使用网格。这使得元素的放置变得容易-当然，由于列在小屏幕上移动了布局，因此响应速度很快。

<li class="has-form">
	<form>
		<div class="row collapse">
			<div class="small-8 columns">
				<input type="text">
			</div>
			<div class="small-4 columns">
				<a href="#" class="alert button">Search</a>
			</div>
		</div>
	</form>
</li>

面包屑

面包屑在基于CMS的网站（例如Wordpress）上很常见，在这些网站上，多级页面层次结构可能会变得有些复杂。只要将“ breadcrumbs”类添加到<ul>标记或<nav>标记中，就可以在任何Foundation项目中使用这些标记。使用无序列表时，所有链接都必须位于列表项中，而nav元素内的链接则必须是定位标记。

面包屑标记中包括的唯一其他类是“不可用”和“当前”。

<ul class="breadcrumbs">
	<li><a href="#">Home</a></li>
	<li><a href="#">Features</a></li>
	<li class="unavailable"><a href="#">Gene Splicing</a></li>
	<li class="current"><a href="#">Cloning</a></li>
</ul>

接下来的是

顶部栏非常灵活，并且足够简单，可以合并到您的任何基础项目中。在本课程的下一部分中，我们将讨论按钮，下拉菜单和清除插件。

翻译自: https://webdesign.tutsplus.com/articles/foundation-for-beginners-the-top-bar--webdesign-12455