Foundation for Sites6.8.1 變更日誌
元件清單

頂部欄

新的頂部工具列是我們彈性選單元件的簡化包裝。

基礎知識

頂部工具列 (.top-bar) 可以包含兩個區段：左手區段 (.top-bar-left) 和右手區段 (.top-bar-right)。在小型螢幕上，這些區段會堆疊在彼此上方。

在以下範例中，我們的頂部工具列包含一個 下拉式選單，以及一個文字輸入欄位和動作按鈕。下拉式選單繼承頂部工具列的背景顏色。如果您使用 Foundation 的 Sass 版本，您可以使用 $topbar-submenu-background 變數來變更這個顏色。

觀看影片中的這部分

edit on codepen button 
<div class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

Foundation 5 的頂部欄功能仍然存在，但它們已被重新製作成較小的個別外掛程式。查看我們關於 回應式導覽 的頁面以瞭解更多資訊。

進階版面

若要設定在行動裝置上使用切換按鈕觸發的回應式選單，請先為選單提供一個唯一的 ID。接著，新增一個標題欄，其類別為 .title-bar，且屬性為 data-responsive-toggle。data-responsive-toggle 的值應該是您要切換的選單的 ID。最後，將 data-toggle 新增到將觸發切換的元素。data-toggle 的值也應該是您要切換的選單的 ID。

預設情況下，標題欄會顯示在小螢幕上，而選單會隱藏。在中等中斷點時，標題欄會消失，而選單會一直顯示。此中斷點可以使用 HTML 中的 data-hide-for 屬性或 JavaScript 中的 hideFor 設定來變更。

edit on codepen button 
<div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle="responsive-menu"></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="responsive-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li class="has-submenu">
        <a href="#0">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#0">One</a></li>
          <li><a href="#0">Two</a></li>
          <li><a href="#0">Three</a></li>
        </ul>
      </li>
      <li><a href="#0">Two</a></li>
      <li><a href="#0">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>
選單

堆疊

預設情況下，頂部欄的兩個區段會在小螢幕上堆疊在彼此之上。這可以使用新增類別 .stacked-for-medium 或 .stacked-for-large 來變更。

edit on codepen button 
<div class="top-bar stacked-for-medium">
  <!-- ... -->
</div>

請參閱 固定 外掛程式的文件，以了解如何輕鬆製作一個固定的導覽列。

Sass 參考

變數

此元件的預設樣式可以使用專案 設定檔 中的這些 Sass 變數來自訂。

名稱類型預設值說明
$topbar-padding 數字 0.5rem

頂部欄的內距。
$topbar-background 顏色 $light-gray

頂部工具列的背景顏色。此顏色也會串接至頂部工具列中的選單。
$topbar-submenu-background 顏色 $topbar-background

頂部工具列中子選單的背景顏色。如果 $topbar-background 為透明，則此設定會很有用。
$topbar-title-spacing 數字 0.5rem 1rem 0.5rem 0

頂部工具列標題的間距。
$topbar-input-width 數字 200px

頂部工具列內 <input> 元素的最大寬度。
$topbar-unstack-breakpoint 斷點 medium

頂部工具列從行動裝置檢視切換至桌面檢視的斷點。

混合

我們使用這些混合來建構此元件的最終 CSS 輸出。你可以自行使用混合，從我們的元件建構你自己的類別結構。

top-bar-container

@include top-bar-container;

新增頂部工具列容器的樣式。

top-bar-stacked

@include top-bar-stacked;

讓頂部工具列的區段堆疊在彼此上方。

top-bar-unstack

@include top-bar-unstack;

復原 top-bar-stacked() 混合套用的 CSS。