Bar navigasi atas asas
Bar navigasi atas diletakkan di kepala halaman:
Instance
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<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>
<div style="padding:20px;">
<h3>基本头部工具条实例</h3>
<p>工具条是在页面头部的导航。</p>
<p><strong>注意:</strong> 在小屏幕上工具条会被一个按钮取代 (重置窗口，查看效果)。</p>
<p>在按钮被点击后导航项将显示。</p>
</div>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>Jalankan instance»
Klik butang "Jalankan" Contoh" untuk melihat contoh dalam talian
Analisis contoh
Gunakan <nav class="top-bar" data-topbar> untuk mencipta bar alat standard. Kelas .title-area mentakrifkan kawasan logo tapak web (mesti elakkan li.name dalam). Selepas skrin menjadi lebih kecil anda boleh melihat butang "menu". Menu Foundation akan dilipat dan berkembang secara automatik mengikut saiz skrin:
Pada skrin kecil, banyak pilihan akan disembunyikan kerana saiz. Kelas li.toggle-topbar menu.icon mencipta butang menu yang memaparkan pilihan tersembunyi apabila diklik.
Petua: Tetapkan semula tetingkap penyemak imbas untuk melihat kesannya.
.top-bar-section mentakrifkan bahagian pautan navigasi. Kelas .left menentukan bahawa pautan dijajar ke kiri. Kelas .active digunakan untuk memaparkan item yang dipilih dengan latar belakang biru.
Petua: Jika anda mahu pautan navigasi dijajarkan ke kanan, anda boleh menukar .left kepada .right:
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<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="right">
<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>
<div style="padding:20px;">
<h3>右对齐工具条</h3>
<p> .right 类设置工具条按钮右对齐。</p>
<p><strong>注意:</strong> 在小屏幕上工具条会被一个按钮取代 (重置窗口，查看效果)。</p>
<p>在按钮被点击后导航项将显示。</p>
</div>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>Jalankan contoh»
Klik butang "Jalankan contoh" untuk melihat contoh dalam talian
Anda boleh menetapkan penjajaran kiri dan kanan penjajaran pada masa yang sama:
Instance
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<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>
</ul>
<ul class="right">
<li><a href="#">Sign Up</a></li>
<li><a href="#">Login</a></li>
</ul>
</section>
</nav>
<div style="padding:20px;">
<h3>左右都有对齐</h3>
<p>该实例演示了工具条左右都有选项。</p>
<p><strong>注意:</strong> 在小屏幕上工具条会被一个按钮取代 (重置窗口，查看效果)。</p>
<p>在按钮被点击后导航项将显示。</p>
</div>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>Run instance»
Klik butang "Run instance" untuk melihat contoh dalam talian
Bar navigasi Anda boleh menambah garis pembahagi melalui kelas .divider (garisan menegak pada skrin besar, garisan mendatar pada skrin kecil):
Instance
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<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 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>
</section>
</nav>
<div style="padding:20px;">
<h3>顶部导航栏分割线</h3>
<p>导航栏可以通过 .divider 类来添加分割线 (大屏幕上是垂直的线，小屏幕上是水平线)。</p>
</div>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
The drop -menu bawah bar navigasi
Bar navigasi atas boleh menetapkan menu lungsur .
Anda boleh menyediakan menu lungsur dengan menambahkan kelas <li> pada elemen .has-dropdown:
Instance
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<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 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>
</nav>
<div style="padding:20px;">
<h3>带有下拉菜单的工具栏</h3>
<p>该实例演示了带有下拉菜单的攻击栏。</p>
</div>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>Jalankan contoh »
Klik butang "Jalankan contoh" untuk melihat contoh dalam talian
Barisan pemisah
Gunakan kelas .divider untuk tetapkan garis pemisah menu lungsur turun:
Instance
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<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 class="has-dropdown">
<a href="#">Dropdown</a>
<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>
</ul>
</section>
</nav>
<div style="padding:20px;">
<h3>带有有分割线的下拉菜单</h3>
<p> .divider 类用于设置下拉菜单的分割线。</p>
</div>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>Run Instance»
Klik "Run Butang Instance" untuk melihat contoh dalam talian
Label menu lungsur turun
Tambah elemen <li> di dalam <label> untuk menetapkan label (tajuk) menu lungsur:
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<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 class="has-dropdown">
<a href="#">Dropdown</a>
<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>
</li>
</ul>
</section>
</nav>
<div style="padding:20px;">
<h3>下拉菜单标签(标题)</h3>
<p>使用 label 元素为下拉菜单设置标签(标题)。</p>
</div>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Jatuhkan terbenam- menu turun
Menu lungsur Anda boleh membenamkan menu lungsur lain:
Instance
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<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="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>
</nav>
<div style="padding:20px;">
<h3>导航栏内嵌下拉菜单</h3>
<p>该实例演示了下拉菜单中再嵌入下拉菜单。</p>
</div>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>Jalankan Instance»
Klik butang "Jalankan Instance" untuk melihat Contoh dalam talian
Boleh Diklik
Secara lalai, menu lungsur turun bar navigasi dipaparkan selepas tetikus bergerak di atasnya. Kita boleh menggunakan atribut data-options="is_hover: false" untuk menetapkan bar navigasi untuk dipaparkan selepas tetikus diklik :
Instance
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<nav class="top-bar" data-topbar data-options="is_hover: false">
<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 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>
</nav>
<div style="padding:20px;">
<h3>点击下拉菜单 With Clickable Dropdown</h3>
<p>默认情况下导航栏的下拉菜单在鼠标移动过去后显示，我们可以使用 <code>data-options="is_hover: false"</code> 属性来设置导航栏在鼠标在点击后显示。</p>
</div>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Butang dan ikon pada bar navigasi
Anda boleh meletakkan ikon dan butang pada bar navigasi:
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<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><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#" class="button">Button Link</a></li>
</ul>
</section>
</nav>
<div style="padding:20px;">
<h3>头部工具条按钮</h3>
<p>头部工具条按钮实例。</p>
</div>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>Run Instance»
Klik "Run Instance butang " untuk melihat contoh dalam talian
Anda boleh meletakkan ikon pada bar navigasi, lebih banyak gaya gambar boleh dilihat Tutorial ikon asas:
Instance
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<!-- Foundation 图标样式 -->
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-icons/foundation-icons.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<nav class="top-bar" data-topbar>
<section class="top-bar-section">
<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>
</section>
</nav>
<div style="padding:20px;">
<h3>工具条图标</h3>
<p>工具条上显示图标实例。</p>
</div>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Bar Navigasi Tetap
Bar navigasi boleh dibetulkan di bahagian atas halaman.
Bar navigasi di bahagian atas tidak akan bergerak apabila halaman ditatal.
Untuk membetulkan bar navigasi, hanya letakkan bar navigasi di dalam <div class="fixed">:
Contoh
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="height:1500px"> <div class="fixed"> <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> &am
