Latest web development tutorials

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.w3big.com/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 >