Foundation 基础Foundation 教程Foundation 安装Foundation 按钮Foundation 按钮组Foundation 标签Foundation 表单Foundation 表格Foundation 侧边栏Foundation 顶部导航栏Foundation 分页Foundation 滑动导航Foundation 滑块Foundation 价格表Foundation 进度条Foundation 均衡器(Equalizer)Foundation 开关Foundation 列表Foundation 麦哲伦（Magellan）导航Foundation JoyrideFoundation 面板Foundation 模态框Foundation 输入框 尺寸Foundation 提示框Foundation 提醒框Foundation 图标Foundation 图片Foundation 文本Foundation 下拉菜单Foundation 选项卡Foundation 折叠列表Foundation 手册Foundation CSS 参考手册Foundation CSS 可见性Foundation 图标参考手册Foundation 网格Foundation 块状网格Foundation 网格 - 大型设备Foundation 网格 - 水平堆叠Foundation 网格 - 小型设备Foundation 网格 - 中型设备Foundation 网格实例Foundation 网格系统
©
本文档使用
php.cn手册 发布
文字
Foundation 顶部导航栏
顶部导航栏放在页面头部：
实例
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<!-- 如果你不需要标题或图标可以删掉它 -->
<h1><a href="#">WebSiteName</a></h1>
</li>
<!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类，可以去除图标。
如果需要只显示图片，可以删除 "Menu" 文本 -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</section>
</nav>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>实例预览 »实例解析
使用 <nav class="top-bar" data-topbar> 创建标准工具条。.title-area 类定义了网站logo区域 (必须防止li.name 内) 。屏幕变小后你就可以看到一个 "menu" 按钮。 Foundation 的菜单会根据屏幕尺寸自动折叠喝延展：
小屏幕上，由于尺寸的原因很多选项会被隐藏。 li.toggle-topbar menu.icon 类创建了一个菜单的按钮，点击它可以显示被隐藏的选项。
提示: 重置浏览器窗口查看效果。
.top-bar-section 定义了导航的链接部分。 .left 类指定链接左对齐。 .active 类用于显示选中的项，背景为蓝色。
提示: 如果你想导航链接右对齐可以将 .left 修改为 .right :
实例
<section class="top-bar-section"> <ul class="right">...实例预览 »
你可以同时设置左边对齐与右边对齐：
实例
<section class="top-bar-section"> <ul class="left"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> </ul> <ul class="right"> <li><a href="#">Sign Up</a></li> <li><a href="#">Login</a></li> </ul> </section>实例预览 »
导航栏可以通过 .divider 类来添加分割线 (大屏幕上是垂直的线，小屏幕上是水平线):
实例
<ul class="left"> <li class="active"><a href="#">Home</a></li> <li class="divider"></li> <li><a href="#">Page 1</a></li> <li class="divider"></li> <li><a href="#">Page 2</a></li> <li class="divider"></li> <li><a href="#">Page 3</a></li> <li class="divider"></li> </ul>实例预览 »
导航栏的下拉菜单
顶部导航栏可以设置下拉菜单。
可以通过在 <li> 元素上添加 .has-dropdown 类来设置下拉菜单:
实例
<section class="top-bar-section"> <ul class="left"> <li class="active"><a href="#">Home</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 class="active"><a href="#">Active link in dropdown</a></li> </ul> </li> </ul> </section>实例预览 »
分割线
使用 .divider 类来设置下拉菜单的分割线:
实例
<ul class="dropdown"> <li><a href="#">Apple</a></li> <li><a href="#">Banana</a></li> <li><a href="#">Orange</a></li> <li class="divider"></li> <li><a href="#">Kale</a></li> <li><a href="#">Spinach</a></li> </ul>实例预览 »
下拉菜单标签
在 <li> 内添加 <label> 元素来设置下拉菜单的标签(标题):
实例
<ul class="dropdown"> <li><label>Fruit</label></li> <li><a href="#">Apple</a></li> <li><a href="#">Banana</a></li> <li><a href="#">Orange</a></li> <li class="divider"></li> <li><label>Vegetable</label></li> <li><a href="#">Kale</a></li> <li><a href="#">Spinach</a></li> </ul>实例预览 »
内嵌下拉菜单
下拉菜单可以再嵌入一个下拉菜单：
实例
<section class="top-bar-section"> <ul class="left"> <li class="has-dropdown"> <a href="#">Dropdown</a> <ul class="dropdown"> <li><label>Level 1</label></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="has-dropdown"> <a href="#">New dropdown</a> <ul class="dropdown"> <li><label>Level 2</label></li> <li><a href="#">2nd level dropdown</a></li> <li><a href="#">2nd level dropdown</a></li> <li class="has-dropdown"> <a href="#">New dropdown</a> <ul class="dropdown"> <li><label>Level 3</label></li> <li><a href="#">3rd level dropdown</a></li> <li><a href="#">3rd level dropdown</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </section>实例预览 »
可点击
默认情况下导航栏的下拉菜单在鼠标移动过去后显示，我们可以使用 data-options="is_hover: false" 属性来设置导航栏在鼠标在点击后显示:
实例
<nav class="top-bar" data-topbar data-options="is_hover: false">实例预览 »
导航栏上的按钮及图标
你可以在导航栏上放置图标和按钮：
实例
<li><a href="#" class="button">Button Link</a></li>实例预览 »
你可以在导航栏上放上图标，更多图片样式可以查看Foundation 图标教程:
实例
<head> <!-- Foundation 图标样式 --> <link rel="stylesheet" href="http://static.shouce.ren/assets/foundation-icons/foundation-icons.css"> </head> <ul class="left"> <li class="active"><a href="#"><i class="fi-home"></i> Home</a></li> <li><a href="#"><i class="fi-torso"></i> Sign Up</a></li> <li><a href="#"><i class="fi-magnifying-glass"></i> Search</a></li> </ul>实例预览 »
固定导航栏
导航栏可以固定在页面顶部。
页面滚动时导航栏在顶部是不会动的。
要固定导航栏只需要将导航栏放在 <div class="fixed"> 内即可:
实例
<div class="fixed"> <nav class="top-bar" data-topbar> ... </nav> </div>实例预览 »
导航栏绝对定位
我们可以将导航栏放在 <div class="sticky"> 内来设置导航栏的绝对定位，当滚动条滚到到该区域时，该导航栏就像固定导航栏一样在顶部不动:
实例
<div class="sticky"> <nav class="top-bar" data-topbar> ... </nav> </div>实例预览 »
当你使用 .sticky 类时，顶部导航栏在所有屏幕尺寸上将固定不动。如果你需要在指定屏幕上设定只需要在 <nav> 上添加 data-options="sticky_on: small|medium|large" 属性即可：
实例
<div class="sticky"> <!-- 只有在大屏幕上 --> <nav class="top-bar" data-topbar data-options="sticky_on: large"> .. </nav> </div>
或者通过数组设置多个屏幕尺寸：
实例
<div class="sticky"> <!-- 小屏幕和大屏幕 (没有中等屏幕)--> <nav class="top-bar" data-topbar data-options="sticky_on: [small, large]"> .. </nav> </div>
关于我们 联系我们 留言板
手册网