# 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> ``` ### 實例解析 使用 `&lt;nav class="top-bar" data-topbar&gt;` 創建標準工具條。 `.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> ``` ## 導航欄的下拉菜單 頂部導航欄可以設置下拉菜單。 可以通過在 `&lt;li&gt;` 元素上添加 `.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> ``` ## 下拉菜單標簽 在 `&lt;li&gt;` 內添加 `&lt;label&gt;` 元素來設置下拉菜單的標簽(標題): ### 實例 ``` <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 圖標教程](foundation-icons.html): ### 實例 ``` <head> <!-- Foundation 圖標樣式 --> <link rel="stylesheet" href="http://static.runoob.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> ``` ## 固定導航欄 導航欄可以固定在頁面頂部。 頁面滾動時導航欄在頂部是不會動的。 要固定導航欄只需要將導航欄放在 `&lt;div class="fixed"&gt;` 內即可: ### 實例 ``` <div class="fixed"> ? <nav class="top-bar" data-topbar> ??? ... ? </nav> </div> ``` ## 導航欄絕對定位 我們可以將導航欄放在 `&lt;div class="sticky"&gt;` 內來設置導航欄的絕對定位，當滾動條滾到到該區域時，該導航欄就像固定導航欄一樣在頂部不動: ### 實例 ``` <div class="sticky"> ? <nav class="top-bar" data-topbar> ??? ... ? </nav> </div> ``` 當你使用 `.sticky` 類時，頂部導航欄在所有屏幕尺寸上將固定不動。如果你需要在指定屏幕上設定只需要在 `&lt;nav&gt;` 上添加 `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> ```