ar foundation_使用Foundation 5构建顶部栏的画布外导航

daique1908

关注

翻译最新推荐文章于 2026-08-09 10:33:44 发布 496 阅读 AI 写同款· GEO 优化 ›

ar foundation

在较早的教程中，我们学习了如何使用CSS 自定义Foundation 4顶部栏。从那时起，ZURB发布了Foundation 5。比其前身更快，更精简，更强大。还值得注意的是，ZURB带来了Off Canvas功能，该功能可以在Foundation 3中找到。

今天，我们将结合使用画布功能和顶部栏导航。结果将是为台式机用户提供一个不错的自定义导航，为平板电脑和移动用户提供一个光滑的画布菜单。

注意：此处使用的功能不适用于IE8及更低版本。本教程末尾列出的资源中已包含IE9的修复程序。

要求

为了遵循本教程，您需要具备以下中级经验：

对基础和网格系统的基本了解
与Sass and Compass Foundation项目一起工作的知识

入门

搭建环境

如果尚未安装，请根据需要使用Foundation Sass文档设置Compass和Sass。如果您已经完成了此操作，那么这里是使用命令提示符创建新Foundation 5项目的快速设置：

转到您的首选目录

cd c:/user/your-working-environment

使用此命令创建您的项目

foundation new your-project

转到您新创建的项目文件

cd your-project

并使用此命令来获取指南针以观看和编译您的Sass文件

compass watch

如果一切顺利，则目录应如下所示：

剩下的只有一件事，那就是创建我们的style.scss 。为此，请在scss文件夹中创建一个新文件，然后将该文件命名为style.scss。我们稍后将需要此文件。如果您正在运行Compass，则应该已经将style.scss编译为 style.css 文件放在样式表文件夹中。太好了，我们已完成所有设置，让我们开始编写通用HTML结构代码。

设置HTML结构

步骤1：一般标记

打开index.html并删除body标记之间的所有内容，除了</body>之前的脚本。我们需要它们来使Foundation的所有功能正常工作。其次，继续并在<head>添加以下代码行，以确保我们加载了CSS文件。

<link rel="stylesheet" href="stylesheets/style.css" />

设置好之后，让我们添加几个部分，并为我们的页面提供一些虚拟内容。我们将从一些基础知识开始，添加标题，主要，服务，号召性用语，页脚和版权部分。

<!-- HEADER SECTION -->
<header>
	<div class="row">
	    <div class="small-12 medium-12 large-12 columns">
			<div class="logo">
				<h1>Foundation 5 Topbar / Offcanvas menu</h1>
			</div> <!-- END DIV.LOGO -->
		</div> <!-- END 12 COLUMNS -->
	</div> <!-- END ROW -->
</header> <!-- END HEADER -->

<!-- MAIN SECTION -->
<section class="main-section">
	<!-- CONTENT SECTION -->
	<section class="full-width content-section">
		<div class="row">
			<div class="small-12 medium-12 large-12 columns">
				<h2>Moving aside for the Offcanvas people!</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, minus molestias dolores blanditiis esse? Quam, accusamus, quo, eum, ipsum voluptatibus aliquam perspiciatis qui porro est sit eligendi suscipit. Expedita, eligendi, laboriosam animi itaque accusantium repudiandae dicta ullam quia ipsum amet quam nesciunt non! Porro, fuga molestiae quaerat accusantium nesciunt omnis.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, minima, quidem repellendus facilis dignissimos laboriosam doloribus sequi tempora iusto facere maxime quasi est ex qui commodi nobis aliquid id eius magnam consectetur. Ut deserunt repellat asperiores dolores odio! Incidunt, esse, distinctio modi ratione facilis iusto tempora saepe nisi nostrum culpa velit eaque quos dolore repellat facere accusamus architecto iure similique numquam autem asperiores error cumque eum. Dolor, minima aspernatur autem eaque ipsa officiis rem! Suscipit, esse, quos. Quos, perferendis, iure nobis modi perspiciatis enim error nulla asperiores dignissimos harum. Dolor, non rem in nobis illum id hic laboriosam blanditiis aliquid!</p>
			</div> <!-- END 12 COLUMNS -->
		</div> <!-- END ROW -->
	</section> <!-- END SECTION.CONTENT-SECTION -->

	<!-- SERVICES SECTION -->
	<section class="full-width services-section">
		<div class="row">
			<div class="small-12 medium-4 large-4 columns">
				<h3>Service #1</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
			</div>

			<div class="small-12 medium-4 large-4 columns">
				<h3>Service #3</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nihil nemo tempore voluptatum veritatis corrupti id doloremque. Saepe, in sequi voluptatem impedit rem omnis aliquam?</p>
			</div>

			<div class="small-12 medium-4 large-4 columns">
				<h3>Service #3</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate ducimus aut commodi eius! Sequi, magni labore ea iusto quibusdam autem repellendus ipsum dolorem quasi maxime!</p>
			</div>

		</div> <!-- END ROW -->
	</section> <!-- END SECTION.FULL-WIDTH.SERVICES-SECTION -->

	<!-- CALL 2 ACTION -->
	<section class="full-width call-to-action">
		<div class="row">
			<div class="small-12 medium-12 large-12 columns">
				<a href="#" class="button radius">Get in touch with us!</a>
			</div>
		</div>
	</section>
</section> <!-- END SECTION.MAIN-SECTION -->

<!-- FOOTER SECTION -->
<footer>
	<div class="row">
    	<div class="small-12 medium-4 large-4 columns">
		    <h4>Foundation</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
		</div>

		<div class="small-12 medium-4 large-4 columns">
			<h4>Foundation</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
		</div>

		<div class="small-12 medium-4 large-4 columns">
			<h4>Foundation</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
		</div>
	</div> <!-- END ROW -->
</footer> <!-- END FOOTER -->

<!-- COPYRIGHT SECTION -->
<section class="full-width copyright-section">
	<div class="row">
	    <div class="small-12 columns">
			<p>&copy; 2014</p>
		</div> <!-- END 12 COLUMNS -->
	</div> <!-- END ROW -->
</section> <!-- END SECTION.FULL-WIDTH COPYRIGHT-SECTION -->

在这里，我们添加了带有徽标的标题部分，然后是一个主要部分，分为内容部分，三个服务和号召性用语。最后是一个带有三列的页脚部分和一个版权部分。到目前为止简单明了的标记，让我们进入顶部吧！

第2步：顶部栏标记

我们将把Top Bar包裹在带有navigation-section类navigation-section ，以用于样式设计。我们还将为该部分提供另一类： show-for-large-up 。这样可以确保仅在最小宽度和更大宽度的设备上显示顶部栏。这是Foundation为我们提供的众多可见性类之一（您可以在Foundation组件文档中阅读有关它们的更多信息）。现在进行标记：

<!-- LARGE SCREEN TOP BAR MENU -->
<section class="navigation-section show-for-large-up">
	<div class="row">
		<div class="large-12 columns">
			
            <!-- TOP BAR INITIALIZATION -->
			<nav class="top-bar" data-topbar>
				<ul class="title-area">
					<li class="name">
						<h1></h1>
					</li>
				</ul> <!-- END UL.TITLE-AREA -->

				<!-- TOP BAR MENU ELEMENTS -->
				<section class="top-bar-section">
					<ul class="left">
						<li class="active"><a href="index.html">Home</a></li>
						<li class="has-dropdown">
							<a href="blog.html">Blog</a>
							<ul class="dropdown">
								<li><a href="blog.html">Archive</a></li>
								<li><a href="post.html">Single</a></li>
							</ul>
						</li>
						<li class="has-dropdown">
							<a href="page.html">Page</a>
							<ul class="dropdown">
								<li><a href="page.html">Full-wdith</a></li>
								<li><a href="sidebar-left.html">Left Sidebar</a></li>
								<li><a href="sidebar-right.html">Right Sidebar</a></li>
							</ul>
						</li>
						<li><a href="portfolio.html">Portfolio</a></li>
						<li class="has-dropdown">
							<a href="#">Dropdown</a>
							<ul class="dropdown">
								<li><a href="#">First link in dropdown</a></li>
								<li><a href="#">Second link in dropdown</a></li>
								<li><a href="#">Third link in dropdown</a></li>
							</ul>
						</li>
					</ul>
				</section> <!-- END SECTION.TOP-BAR-SECTION -->
			</nav> <!-- END NAV.TOP-BAR -->

		</div> <!-- END 12 COLUMNS -->
	</div> <!-- END ROW -->
</section> <!-- END SECTION.NAVIGATION-SECTION -->

注意：请在导航栏中添加data-topbar。这样，我们可以确保顶部栏JavaScript正常运行（例如，下拉菜单）。

步骤3：非画布标记

我们的画布外菜单将隐藏在视口边界之外。当我们按下菜单键时，Offcanvas将会滑入（在我们的案例中是从左侧）并将页面内容移到右侧。在我们的设置中，我们将排除此运动中的页眉和页脚。仅内容区域将移到一边，而页眉和页脚保留在原位。

另外，当向下滚动时，我们的页眉（可能包含徽标和其他内容）将固定显示在页面顶部（注意：该页面应包含足够的内容以使其正常工作，因为否则页脚部分也会浮动在我们的Offcanvas菜单上方）。这意味着我们必须在主要内容部分周围“包裹”画布。在顶部栏导航之后部分和我们的主要内容部分之前，放置以下HTML：

<!-- OFF CANVAS SECTIONS WRAPPING THE MAIN CONTENT -->
<div class="off-canvas-wrap">
    <div class="inner-wrap">

		<!-- OFF CANVAS MENU BAR -->
		<nav class="tab-bar hide-for-large-up">

			<section class="left-small">
				<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
			</section>

			<section class="right tab-bar-section">
				<h1 class="title">Menu</h1>
			</section>

		</nav> <!-- END NAV.TAB-BAR HIDE-FOR-LARGE-UP -->

		<!-- OFF CANVAS MENU -->
		<aside class="left-off-canvas-menu">
			<ul class="off-canvas-list">
				<li><label>Navigation</label></li>
				<li><a href="index.html">Home</a></li>
			</ul>
			<ul class="off-canvas-list">
				<li class="has-dropdown"><a href="blog.html">Blog</a>
					<ul class="off-canvas-list">
						<li><a href="blog.html">Archive</a></li>
						<li><a href="post.html">Single</a></li>
					</ul>
				</li>
			</ul>
			<ul class="off-canvas-list">
				<li class="has-dropdown"><a href="page.html">Page</a>
					<ul class="off-canvas-list">
						<li><a href="page.html">Full-width</a></li>
						<li><a href="sidebar-left.html">Left Sidebar</a></li>
						<li><a href="sidebar-right.html">Right Sidebar</a></li>
					</ul>
				</li>
			</ul>
			<ul class="off-canvas-list">
				<li><a href="portfolio.html">Portfolio</a></li>
			</ul>
		</aside>

让我们分解一下。我们创建了两个div元素；一个带有类off-canvas-wrap ，另一个带有类inner-wrap 。画布外包裹将隐藏我们的内容，直到按下菜单按钮为止。的内包装包含我们的导航菜单栏，左侧的画布外菜单和主要内容部分。我们为nav提供了一类hide-for-large-up的hide-for-large-up ，以确保它仅适用于中小型设备。通过在旁提供一类left-off-canvas-menu ，我们确保将off-canvas菜单显示在屏幕的左侧。 “画布”菜单中的菜单项与顶部栏相似。对于画布而言，我们使用无序列表和一类的off-canvas-list来实现魔术效果。

剩下要做的就是为用户提供一种关闭Offcanvas菜单的方法。在那之后，我们关闭了off-canvas-wrap和inner-wrap div。关闭主要部分后，请添加此权限。

<!-- CLOSE THE OFF-CANVAS MENU -->
    <a class="exit-off-canvas"></a>

	</div>
</div> <!-- END OFF CANVAS -->

步骤4：到目前为止的结果

让我们打开浏览器，找到我们刚刚编辑的index.html文件。结果应类似于下面的屏幕截图（尝试一下，调整浏览器的大小！）

设置Sass

好吧，我们为桌面用户提供了一个功能齐全的顶部栏，为平板电脑和手机等较小设备的用户提供了一个漂亮，流畅的画布菜单。但是，我们的页面看起来还不是真正的网页，所以让我们继续添加一些风味。

步骤1：一般样式

首先，我们为常规部分（页眉，导航，主要，页脚和版权）提供一些颜色。我们还将为我们的身体提供微妙的背景色，并创建一个full-width类以将其宽度设置为100％。在HTML中，我们已将全角类添加到不同的部分，以确保它们延伸到浏览器的边界。看看下面的Sass：

body {
    background-color: #f1f1f1;
}

.full-wdith {
	min-width: 100%;
}

header {
	background: url('../images/stary-bg.png') #074e68;
	min-height: 175px;
	h1 {
		color: #fff;
		padding-top: 50px;
	}
}

.navigation-section {
	background-color: #333;
	.top-bar {
		li {
			text-transform: uppercase;
		}
	}
}

.main-section {
	padding: 30px 0 25px 0;
}

footer {
	background-color: #074e68;
	padding: 50px 0 40px 0;
	h4, p {
		color: #fff;
	}
}

.copyright-section {
	background-color: #333;
	color: #fff;
	padding: 25px 0 0 0;
}

注意：要添加Starry BG，请下载源文件！

我们通过添加一些填充为我们的设计提供了更多的呼吸空间，并通过为所有部分提供背景颜色和最小宽度为100％进行了全宽设计。我们还为菜单项提供了大写的文本转换。

步骤2：使用_settings.scss的顶部栏样式

要设置顶部栏的样式，让我们进入_settings.scss文件。根据您使用的代码编辑器，使用查找选项并输入“ Topbar”。在这里，您可以找到用于更改标准顶部栏的所有设置。在本教程中，我们将使用两个不同的选项。一个使我们的顶部栏高一些，另一个使字体大小增加一点。取消注释并更改以下两个设置：

$topbar-height: 65px;
$topbar-link-font-size: rem-calc(15);

步骤3：使用_setting.scss脱离画布样式

我们还将使用设置文件来调整“画布”菜单。标准的画布外标记确实非常不错，但是请确保导航栏的高度与顶部栏的导航栏的高度相同。除此之外，我们将不得不移动汉堡包图标一点，所以它从顶部居中。在设置文件中，找到并键入“ Off-canvas”。取消注释并更改以下两个设置：

$tabbar-height: rem-calc(65);
$tabbar-hamburger-icon-top: rem-calc(16);

步骤4：享受成效

保存文件，让指南针编译文件并刷新浏览器。现在，我们的页面上有更多果汁，并且全部由出色的顶部栏和非画布提供动力！您的结果应如下所示：

结论

我们使用Foundation的顶部栏和非画布创建了一个漂亮的响应式页面，添加了我们自己的Sass样式，以使其更加鲜活，并使用_settings.scss文件对页面进行了调整。

显然，我们刚才演示的_settings.scss可以做很多事情。继续进行设置，以了解如何轻松自定义网站中的Foundation元素，或在此演示中进行尝试以进一步自定义顶部栏/画布菜单。玩得开心！

翻译自: https://webdesign.tutsplus.com/articles/build-a-top-bar-off-canvas-navigation-with-foundation-5--webdesign-17767