ar foundation_如何自定义Foundation 4顶栏

daique1908

墨衍会员 · AI 创作全网分发码龄10年

关注

翻译最新推荐文章于 2026-07-25 14:22:59 发布 285 阅读 AI 写同款· GEO 优化 ›

ar foundation

Zurb的Foundation 4具有出色的顶部栏，几乎成为了Foundation网站构建的象征。今天，我们将研究如何以不同的方式实现它，将其放置在页面上的其他位置，从而为您提供自定义的响应式水平导航菜单。

入门

首先，我们需要最新的Foundation 。解压缩所有文件并将其放在您的工作或测试目录中。我们将仅使用index.html，创建自己的style.css，在其中我们将覆盖顶部栏的不同类以进行自定义导航。

另外，下载上面提供的背景图片。我们将使用此菜单，将其放置在“ img”文件夹中。都有吗然后启动您喜欢的编辑器，然后开始吧！

设置HTML结构

步骤1：一般标记

您下载的索引文件中带有一些预设HTML。您可以将所有内容保留在header标记中，并且可以将脚本链接（在结束body标记之前）保留在原处。我们需要所有这些来确保Grid和Top Bar真正起作用。

您可以清除其余的虚拟内容。我们将在这里进行全宽度设计，没有什么太复杂的，只是为了更好地了解我们正在使用的产品。

好了，让我们设置页眉，导航，内容和页脚区域，并放入一些虚拟内容以进行填充。我们将为每个区域分配一个“全角”类，然后在每个区域中放置一个class为“ row”的div，一个div为class =“ large-12”和class =“ columns”的div。这样就建立了基本的网格结构。

注意：有关网格如何工作的更多信息，请参阅基础入门：网格系统

<!-- HEADER AREA -->
<header class="full-width header-area">
	<div class="row">
		<div class="large-12 columns">
			<h2>Foundation-4 Custom Top Bar</h2>
		</div>
	</div>
</header> 

<!-- NAVIGATION AREA -->
<div class="full-width navigation-area">
	<div class="row">
		<div class="large-12 columns">
							
			<nav class="top-bar"></nav>
		</div>
	</div>
</div>

<!-- CONTENT AREA -->
<div class="full-width content-area">
	<div class="row">
		<div class="large-12 columns">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, asperiores, voluptas, veniam commodi impedit tenetur dolores cumque facere explicabo esse quaerat veritatis laboriosam eius modi amet maxime non officia nemo? Iste, quisquam, voluptatum, dolor nam reiciendis unde aliquam numquam necessitatibus odio et perspiciatis facere nihil inventore ullam aspernatur corporis veritatis quia dolorum? Sed, hic, eos quis quibusdam eum aut optio repudiandae at! Eligendi, neque ratione alias enim quae magnam dolores esse pariatur earum laborum reiciendis nobis sunt sequi sapiente ducimus iure ipsam. Sapiente, minima, rerum, facere quos saepe pariatur magni dolorem cum amet nemo quis laborum ipsa dignissimos ducimus inventore modi rem cumque quibusdam quam asperiores! Optio, nobis suscipit molestias voluptas veritatis aspernatur accusamus excepturi rem quaerat impedit animi voluptate at facilis aliquid cum fugit labore omnis provident recusandae autem. Doloribus, mollitia quos officiis quas sapiente nam dolor praesentium maxime cupiditate illum? Rem, esse, nulla vitae adipisci sequi deleniti quasi!</p>
		</div>
	</div>
</div>

<!-- FOOTER AREA -->
<div class="full-width footer-area">
	<div class="row">
		<div class="large-12 columns">
			&copy; 2013
		</div>
	</div>
</div>

第2步：顶部栏标记

在进行样式设计之前，我们将布置必要HTML结构，以使Foundation Top Bar正常工作。我们需要五个基本元素来使引擎运行：

nav with class="top-bar"
ul with class="title-area"
li with class="toggle-topbar" =展开移动布局中的菜单
section with class="top-bar-section"
ul with class="left"和ul with class="right"

现在，让我们建立这些基础知识并实现这五个要素。

注意：在本教程示例中，我们将要创建一个自定义的导航菜单，从而删除其中的标题（通常包含文本或图像形式的徽标）。为此，我们只需在ul中将class =“ name”的li保留为class =“ title-area”即可。

另外，让我们添加一些菜单元素和一个下拉菜单。要包括一个下拉列表，请在要包含该下拉列表的li元素中添加“ has-dropdown”类，然后引入一个带有“ dropdown”类的新ul。为了指示当前活动页面，我们可以在li元素上为当前菜单项提供“活动”类。我们可以将ul class =“ right”留空。通常，您将使用此区域添加按钮或搜索输入表单。有关顶部栏标记细节的更多信息，请参阅基础入门指南：顶部栏。

查看以下HTML，这些注释说明了其构建方式。

<!-- Nav Wrap --> 
<nav class="top-bar">
	<ul class="title-area">
	<!-- Title Area -->
		<li class="name"></li>
		<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
		<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
	</ul>

	<!-- The Section wrap -->
	<section class="top-bar-section">
	
		<!-- Left Nav Section -->
		<ul class="left">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">About us</a></li>
			<li><a href="#">Our products</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Prices</a></li>
			<li class="has-dropdown">
				<a href="#">Features</a>
				<ul class="dropdown">
					<li><a href="#">Modalboxes</a></li>
					<li><a href="#">Submenu's and navigation</a></li>
					<li><a href="#">Price tables</a></li>
					<li><a href="#">Buttons</a></li>
					<li><a href="#">Button groups</a></li>
					<li><a href="#">Labels, Keystrokes and Tooltips</a></li>
					<li><a href="#">Alert boxes</a></li>
					<li><a href="#">Columns</a></li>
				</ul>
			</li>
			<li><a href="#">Contact</a></li>
		</ul>

		<!-- Right Nav Section -->
		<ul class="right"></ul>

	</section>
</nav>

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

在浏览器中查看结果。现在，我们使用顶部栏设置基本的Foundation框架来创建水平菜单。要将其放置在浏览器顶部以外的其他位置，只需将nav class =“ top-bar”放在div行和列div中。

调整浏览器大小时，您可以看到菜单在预定义的断点处更改。

下一步是为它们提供一些自定义样式。我们将专注于如何设置顶部栏样式以及使用哪些类。

设置CSS

步骤1：一般样式

如果尚未创建新CSS文件，则将其命名为style.css并将其放置在Foundation下载的css文件夹中。不要忘记将其包含在索引文件的标头标记中，并在foundation.css下引用它，如下所示：

<head>
    <meta charset="utf-8">
 	<meta name="viewport" content="width=device-width">
 	<title>Foundation 4</title>

 	<link rel="stylesheet" href="css/foundation.css">
 	<link rel="stylesheet" href="css/style.css">
 
 	<script src="js/vendor/custom.modernizr.js"></script>
</head>

如果不将其放在foundation.css下，它将不会覆盖Top Bar类。

好吧，让我们首先获得页眉，导航，内容和页脚区域的一些基本样式。对于导航区域，我们将使用您之前下载的背景图像。总体设计没什么大不了的，请看下面CSS。我们向每个区域添加一个全角类，以确保它填充浏览器的全角。

body {
	background-color: #ccc;
}

/** Set the backgrounds for the different sections **/
.header-area {
    background-color: #2d465c;
    min-height: 160px;
}

.navigation-area {
	background-image: url('../img/navigation-container.jpg');
	background-repeat: repeat-x;
}

.content-area {
	padding: 50px 0 70px 0;
}

.footer-area {
    background-color: #1f1f1f;	
    color: #fff;
	min-height: 50px;
	padding: 20px 0 0 0;
}

.full-width {
	min-width:100%;
	position: relative;
}

h2 {
	color: #fff;
	font-weight: normal;
	margin-top: 50px;
}

第2步：顶部栏样式

如果您现在查看结果，菜单看起来仍然有些不合适。那是因为它仍然使用默认CSS。让我们修复它！

我们需要解决几个CSS类，以获得所需的结果。首先，我们将删除.top-bar类和部分列表上的一些黑色背景，并将height和line-height更改为58px（ 导航区域的高度 ）。查看注释以获取进一步的解释。

/** Changes background color, height and margin of the border **/
.top-bar {
    background: none;
    height: 58px;
    line-height: 58px;
    margin-bottom: 0;
}

/** Removes black background on menu bar **/
.top-bar-section ul {
    background: none;
    text-transform: uppercase;
}

/** Removes black background on menu item **/
.top-bar-section li a:not(.button) {
    background: none;
    line-height: 58px;
    padding: 0 27px;
}

我们从nav class =“ top-bar”，部分列表和菜单锚点中删除了默认的黑色背景。我们调整高度，行高和内边距，并将文本转换为大写，以使其完全符合我们的自定义设计。

如果刷新浏览器，您会发现它已经开始成形。让我们继续下拉菜单，菜单项，活动和悬停状态。再次查看下面CSS，阅读注释后的文本以进行解释：

/** Changes the active menu item from default black to a gradient **/
.top-bar-section ul li.active > a {
    background:  rgb(0, 0, 0);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;
    color: #fff;
}

/** Changes the hover state of non active menu items **/
.top-bar-section li:hover a {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;
    color: #fff;
}

/** Changes non active menu items text color to black **/
.top-bar-section ul li > a {
    color: #2d2d2d;
}

/** Changes the hover state of dropdown menu items **/
.top-bar-section ul.dropdown li a:hover:not(.button) {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
}

/** IMPORTANT fill for the ul dropdown container **/
.top-bar-section ul.dropdown {
    background: #333;
    color: #fff;
}

/** This fixes the position and the color of the dropdown arrow **/
.top-bar-section .has-dropdown > a:after {
    border-color: rgba(0, 0, 0, 1) transparent transparent;
    margin-top: 2.5px;
}

我们在这里对菜单进行了几处更改。首先，我们将活动菜单项的默认黑色背景更改为CSS渐变。然后，我们为非活动菜单项重新设置了悬停状态。为了使非活动菜单项更清晰可见，我们将文本颜色更改为深灰色。当鼠标移至下拉菜单项上方时，对.top-bar-section li:hover a所做的更改将使下拉菜单的状态保持.top-bar-section li:hover状态。为了完成CSS，我们对ul下拉容器进行了背景填充，并重新定位了下拉箭头的默认位置，这是因为我们对top-bar-section进行了填充调整。

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

刷新浏览器，查看到目前为止的结果。我们还没有完成；我们仍然需要确保在调整浏览器的屏幕尺寸（或者就此而言，当我们在较小的设备上查看屏幕尺寸）时一切看起来都不错。为了实现这一点，我们将一些媒体查询添加到我们CSS文件中。

设置媒体查询

步骤1：媒体查询

当屏幕尺寸减小时，我们需要进行一些调整以使菜单与我们的自定义设计一起使用。这主要涉及添加一些填充，行高，文本颜色和背景颜色。查看下面CSS，并查看注释以获取每个部分的解释。

@media only screen and (max-width: 942px) {

    /* Makes the responsive menu fit in the navigation container and change its background to black */
    .top-bar ul {
        background-color: rgba(0, 0, 0, 0.5);
        padding-bottom: 13px;
    }

    /* Change non active menu item color to black */
    .top-bar-section ul li > a {
        color: #fff;
    }

    /* Gives the dropdown ul a black fill */
    .top-bar-section ul {
        background: #000;
    }

    /* Give the BACK button after going in a submenu the appropriate filling */
    .top-bar-section .dropdown li.title h5 a {
        line-height: 57px;
    }

    /* This fixes the position and the color of the dropdown arrow */
    .top-bar-section .has-dropdown > a:after {
        border-color: rgba(255, 255, 255, 1) transparent transparent;
        margin-top: 2.5px;
    }

} /* end media query */