The navigation bar at the top of the Foundation
The top navigation bar is placed at the head of the page:
Instance
<
nav
class=
"top-bar"
data-topbar
>
<
ul
class=
"title-area"
>
<
li
class=
"name"
>
If you don!--t need a title or icon, you can delete it--
<
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
>
The !-- initialize Foundation JS
<
script
>
$(document).ready(function() {
$(document).foundation();
})
<
/script
>
Try it out . . .
Instance resolution
Create
<nav class="top-bar" data-topbar>
.title-area
class defines the site logo area (within the
li.name
prevented). W
hen the screen is smaller, you can see a "menu" button.
Foundation's menu automatically folds the drink extension based on the screen size:
On the small screen, many options are hidden due to size.
li.toggle-topbar menu.icon
creates a menu button that can be clicked to display hidden options.
Tip: Reset
the browser window to see the effect.
.top-bar-section
the link section of the navigation.
.left
class specifies that the link is left-aligned.
.active
class is used to display selected items with a blue background.
Tip: If
you want to navigate the link to the right
.left
modify the
.right
:
Instance
<
section
class=
"top-bar-section"
>
<
ul
class=
"right"
>
...
Try it out . . .
You can set the left alignment to the right at the same time:
Instance
<
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
>
Try it out . . .
导航栏可以通过
.divider
类来添加分割线 (大屏幕上是垂直的线,小屏幕上是水平线):
Instance
<
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
>
Try it out . . .
导航栏的下拉菜单
顶部导航栏可以设置下拉菜单。
可以通过在
<li>
元素上添加
.has-dropdown
类来设置下拉菜单:
Instance
<
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
>
Try it out . . .
分割线
使用
.divider
类来设置下拉菜单的分割线:
Instance
<
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
>
Try it out . . .
下拉菜单标签
在
<li>
内添加
<label>
元素来设置下拉菜单的标签(标题):
Instance
<
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
>
Try it out . . .
内嵌下拉菜单
下拉菜单可以再嵌入一个下拉菜单:
Instance
<
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
>
Try it out . . .
可点击
默认情况下导航栏的下拉菜单在鼠标移动过去后显示,我们可以使用
data-options="is_hover: false"
属性来设置导航栏在鼠标在点击后显示:
Instance
<
nav
class=
"top-bar"
data-topbar data-options=
"is_hover: false"
>
Try it out . . .
Buttons and icons on the navigation bar
You can place icons and buttons on the navigation bar:
Instance
<
li
>
<
a
href=
"#"
class=
"button"
>
Button Link
<
/a
>
<
/li
>
Try it out . . .
You can put icons on the navigation bar, and more picture styles can be viewed
in the Foundation icon tutorial
:
Instance
<
head
>
The !-- Foundation icon style
<
link
rel=
"stylesheet"
href=
"http://statics.w3cschool.cn/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
>
Try it out . . .
Pin the navigation bar
The navigation bar can be pinned to the top of the page.
The navigation bar does not move at the top as the page scrolls.
To pin the navigation bar, simply place the navigation bar inside the "fixed" of the
<div class="fixed">
Instance
<
div
class=
"fixed"
>
<
nav
class=
"top-bar"
data-topbar
>
...
<
/nav
>
<
/div
>
Try it out . . .
The navigation bar is absolutely positioned
We can set the absolute positioning of the navigation bar by putting the navigation bar within the
<div class="sticky">
which does not move at the top like a fixed navigation bar when the scroll bar rolls into the area:
Instance
<
div
class=
"sticky"
>
<
nav
class=
"top-bar"
data-topbar
>
...
<
/nav
>
<
/div
>
Try it out . . .
When you
.sticky
class, the top navigation bar is immobilized on all screen sizes.
If you need to set it on the
<nav>
you only need to add
data-options="sticky_on: small|medium|large"
specified screen:
Instance
<
div
class=
"sticky"
>
Only on !-- screen --
<
nav
class=
"top-bar"
data-topbar data-options=
"sticky_on: large"
>
..
<
/nav
>
<
/div
>
Or set multiple screen sizes with arrays:
Instance
<
div
class=
"sticky"
>
Small !-- and large screens (no medium screens)
<
nav
class=
"top-bar"
data-topbar data-options=
"sticky_on: [small, large]"
>
..
<
/nav
>
<
/div
>