選單

我們的彈性選單元件讓您可以輕鬆建立許多常見的導覽模式，全部使用相同的標記。

選單是導覽的彈性、多用途元件。它取代了 Foundation 5 的內嵌清單、側邊導覽、子導覽和圖示列，將它們統一到一個元件中。

所有版本的選單都是一個填滿 <li> 元素的 <ul>，其中包含連結。預設情況下，選單是水平導向的。

<ul class="menu">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

項目對齊

預設情況下，選單中的每個項目都靠左對齊。它們也可以使用 .align-right 類別靠右對齊。

觀看影片中的這部分

在由右至左的環境中，項目預設靠右對齊，而類別 .align-left 可用於反轉方向。

<ul class="menu align-right">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

若要將項目置中，請將 .align-center 加入 .menu 類別。

觀看影片中的這部分

<ul class="menu align-center">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

項目也可以設定為展開並佔用均等的空間，使用 .expanded 類別。由於 CSS 的神奇之處，項目會根據選單中的數量自動調整大小。

觀看影片中的這部分

<ul class="menu expanded">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
</ul>

將 .vertical 類別加入選單以切換其方向。

觀看影片中的這部分

<ul class="vertical menu">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

加入 align-right 類別以將垂直選單靠右對齊。

<ul class="vertical menu align-right">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

加入 align-center 類別以將垂直選單置中。

上述垂直靠左和靠右對齊的選單支援所有類型的選單。
但是垂直選單的 `align-center` 僅適用於基本選單，不適用於下拉式選單、手風琴選單或鑽探式選單。

<ul class="vertical menu align-center">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

簡約樣式

將 .simple 類別加入選單以移除內距和顏色變更。此樣式模仿 Foundation 5 的內嵌清單。

觀看影片中的這部分

<ul class="menu simple">
  <li>One</li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

巢狀樣式

在選單的 <li> 內加入新的選單，並加入類別 .nested 以建立巢狀選單。巢狀選單在內部有額外的內距。

觀看影片中的這部分

<ul class="vertical menu">
  <li>
    <a href="#">One</a>
    <ul class="nested vertical menu">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
    </ul>
  </li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

活動狀態

將類別 .is-active 加入任何 <li> 以建立活動狀態。您可以在伺服器端套用此狀態以標記活動頁面，或使用 JavaScript 動態套用。

觀看影片中的這部分

<ul class="menu">
  <li class="is-active"><a>Home</a></li>
  <li><a>About</a></li>
  <li><a>Nachos</a></li>
</ul>

文字

由於選單項目的內距套用於 <a>，如果您嘗試加入僅為文字的項目，它將會對齊錯誤。若要解決此問題，請將類別 .menu-text 加入任何沒有連結的 <li>。

觀看影片中的這部分

<ul class="menu">
  <li class="menu-text">Site Title</li>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
</ul>

圖示

選單項目可以有圖示。將項目的文字包覆在 <span> 中，然後在 <span> 之前加入 <img> 元素。如果您使用 Foundation 圖示字型，<img> 將會是 <i>。

觀看影片中的這部分

<ul class="menu">
  <li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
</ul>

將類別 .icons 加入父層選單容器中，以指定選單包含圖示。同時，加入您選擇的配置類別，例如 .icon-top。

使用任何選單圖示配置類別時，請確保圖示和文字的順序正確。對於 .icon-right 和 .icon-bottom，圖示必須在文字之後。

觀看影片中的這部分

圖示頂端

<ul class="menu icons icon-top">
  <li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
</ul>

圖示右方

<ul class="menu icons icon-right">
  <li><a href="#"><span>One</span> <i class="fi-list"></i></a></li>
  <li><a href="#"><span>Two</span> <i class="fi-list"></i></a></li>
  <li><a href="#"><span>Three</span> <i class="fi-list"></i></a></li>
  <li><a href="#"><span>Four</span> <i class="fi-list"></i></a></li>
</ul>

圖示底部

<ul class="menu icons icon-bottom">
  <li><a href="#"><span>One</span> <i class="fi-list"></i></a></li>
  <li><a href="#"><span>Two</span> <i class="fi-list"></i></a></li>
  <li><a href="#"><span>Three</span> <i class="fi-list"></i></a></li>
  <li><a href="#"><span>Four</span> <i class="fi-list"></i></a></li>
</ul>

圖示左方

<ul class="menu icons icon-left">
  <li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
</ul>

使用巢狀樣式的圖示位置

巢狀清單可以根據選單層級來調整圖示位置。將類別 .nested 加入巢狀清單，並加入您想要的圖示位置：.icon-top、.icon-right、.icon-bottom、.icon-left。

<ul class="vertical menu icons icon-top">
  <li>
    <a href="#"><i class="fi-list"></i> One</a>
    <ul class="nested vertical menu icons icon-left">
      <li><a href="#"><i class="fi-list"></i> One</a></li>
      <li><a href="#"><i class="fi-list"></i> Two</a></li>
    </ul>
  </li>
  <li><a href="#"><i class="fi-list"></i> Two</a></li>
  <li><a href="#"><i class="fi-list"></i> Three</a></li>
</ul>

請參閱固定外掛的說明文件，了解如何輕鬆建立固定導覽列。

Sass 參考

變數

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

名稱	類型	預設值	說明
`$menu-margin`	數字	`0`	選單的邊界。
`$menu-nested-margin`	數字	`$global-menu-nested-margin`	巢狀選單的左邊界。
`$menu-items-padding`	數字	`$global-menu-padding`	膠囊選單中項目之間的內距。
`$menu-simple-margin`	數字	`1rem`	簡單選單中項目之間的邊界。
`$menu-item-color-active`	顏色	`$white`	作用中選單項目的文字顏色。
`$menu-item-color-alt-active`	顏色	`$black`	作用中選單項目的替代文字顏色。
`$menu-item-background-active`	顏色	`get-color(primary)`	活動選單項目背景顏色。
`$menu-icon-spacing`	數字	`0.25rem`	選單項目中圖示與文字間距。
`$menu-state-back-compat`	布林值	`true`	選單狀態向下相容。如果為 true，重複 `active` 與 `is-active`。但請注意，`active` 將在後續版本中移除。
`$menu-centered-back-compat`	布林值	`true`	選單置中向下相容。如果為 true，重複 `.menu-centered > .menu` 與 `.menu.align-center`。但請注意，`menu-centered` 將在後續版本中移除。
`$menu-icons-back-compat`	布林值	`true`	向下相容，使用 `icon-*` 類別，但沒有 `.icons` 類別。但請注意，此向下相容性將在後續版本中移除。

混合

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

@include menu-base;

建立選單的基本樣式。

@include menu-expand;

展開選單項目，讓每個項目寬度相同。

@include menu-align;

對齊選單項目。

@include menu-direction($dir);

設定選單方向。

參數	類型	預設值	說明
`$dir`	關鍵字	`horizontal`	選單方向。可以是 `horizontal` 或 `vertical`。

@include menu-simple($dir, $margin);

建立一個簡單選單，沒有內距或滑鼠移入狀態。

參數	類型	預設值	說明
`$dir`	關鍵字	`$global-left`	選單方向。這會影響 `<li>` 接收邊距的那一側。
`$margin`	數字	`$menu-simple-margin`	套用至每個 `<li>` 的邊距。

@include menu-nested($margin, $nested-alignment);

加入巢狀選單的樣式，方法是將 margin-left 加入選單。

參數	類型	預設值	說明
`$margin`	關鍵字或數字	`$menu-nested-margin`	邊距長度。
`$nested-alignment`	關鍵字	`left`	巢狀類別對齊方式

@include menu-icons;

加入選單中圖示的基本樣式。

@include menu-icon-alignment($alignment);

在選單中對齊頂部/底部圖示。

參數	類型	預設值	說明
`$alignment`	關鍵字	`置中`	圖示對齊

@include menu-icon-position;

為選單中的圖示加入位置類別。