下拉式選單

JavaScript

使用下拉式選單外掛程式將基本選單變更為可展開的下拉式選單。

水平

下拉式選單建立在選單元件的語法上。將 class .dropdown 和屬性 data-dropdown-menu 加入選單容器中，以設定下拉式選單。

<ul class="dropdown menu" data-dropdown-menu>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

若要建立下拉式選單，請在 <li> 內嵌套新的 <ul>。您可以進一步嵌套以建立更多層級的下拉式選單。

在影片中觀看此部分

請注意，<ul> 出現在 <a> 之後，而不是在其中。

<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a href="#">Item 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

垂直

將 .vertical 類別新增至頂層選單，即可使其垂直顯示。子選單會自動垂直顯示，與頂層選單的方向無關。

選單是區塊層級元素，這表示它們會延伸以填滿其容器的寬度。為了讓以下範例不那麼愚蠢，我們已在選單上硬編碼 max-width。

<ul class="vertical dropdown menu" data-dropdown-menu style="max-width: 250px;">
  <li>
    <a href="#">Item 1</a>
    <ul class="vertical menu nested">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <!-- ... -->
</ul>

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

防止 FOUC

在頁面上的 JavaScript 載入之前，下拉式選單不會有箭頭。但是，一旦 JavaScript 檔案載入，箭頭就會出現，造成未設定樣式的內容閃爍。您可以透過手動新增 .is-dropdown-submenu-parent 類別來防止這種情況。

<ul class="dropdown menu" data-dropdown-menu>
  <li class="is-dropdown-submenu-parent">
    <a href="#">Item 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

Sass 參考

變數

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

名稱	類型	預設值	說明
`$dropdownmenu-arrows`	布林值	`true`	為具有下拉式選單的項目啟用箭頭。
`$dropdownmenu-arrow-color`	顏色	`$anchor-color`	如果使用箭頭，則設定下拉式選單箭頭顏色。
`$dropdownmenu-arrow-size`	長度	`6px`	如果使用箭頭，則設定下拉式選單箭頭大小。
`$dropdownmenu-arrow-padding`	長度	`1.5rem`	設定下拉式選單箭頭內距，以正確對齊箭頭。
`$dropdownmenu-min-width`	長度	`200px`	下拉式子選單的最小寬度。
`$dropdownmenu-background`	顏色	`null`	頂層項目的背景顏色。
`$dropdownmenu-submenu-background`	顏色	`$white`	下拉式選單的背景顏色。
`$dropdownmenu-padding`	數字	`$global-menu-padding`	頂層項目的內距。
`$dropdownmenu-nested-margin`	數字	`0`	設定下拉式選單巢狀邊界
`$dropdownmenu-submenu-padding`	數字	`$dropdownmenu-padding`	子選單項目的內距。
`$dropdownmenu-border`	清單	`1px solid $medium-gray`	下拉式子選單的邊框。
`$dropdown-menu-item-color-active`	顏色	`get-color(primary)`	活動下拉式選單項目的文字顏色。明確覆寫選單預設值
`$dropdown-menu-item-background-active`	顏色	`transparent`	活動式下拉式選單項目背景顏色。明確覆寫選單預設值

JavaScript 參考

初始化

JavaScript 中必須包含下列檔案才能使用此外掛程式

foundation.core.js
foundation.dropdownMenu.js
- 具備公用程式函式庫 foundation.util.keyboard.js
- 具備公用程式函式庫 foundation.util.box.js
- 具備公用程式函式庫 foundation.util.nest.js
- 具備公用程式函式庫 foundation.util.touch.js

Foundation.DropdownMenu

建立 DropdownMenu 的新執行個體。

var elem = new Foundation.DropdownMenu(element, options);

觸發下列事件： DropdownMenu#event:init

名稱	類型	說明
`element`	jQuery	要轉換成下拉式選單的 jQuery 物件。
`options`	物件	覆寫預設外掛程式設定。

外掛程式選項

使用這些選項自訂下拉式選單執行個體。外掛程式選項可以設定為個別資料屬性、一個合併的 data-options 屬性，或作為傳遞給外掛程式建構函式的物件。深入了解 JavaScript 外掛程式的初始化方式。

名稱	類型	預設值	說明
`data-disable-hover`	`布林值`	`false`	不允許滑鼠暫留事件開啟子選單
`data-disable-hover-on-touch`	`布林值`	`true`	不允許觸控裝置上滑鼠暫留
`data-autoclose`	`布林值`	`true`	允許子選單在滑鼠離開事件中自動關閉，如果未按一下開啟。
`data-hover-delay`	`數字`	`50`	在滑鼠暫留事件中延遲開啟子選單的時間量。
`data-click-open`	`布林值`	`false`	允許子選單在父層按一下事件中開啟/保持開啟。允許游標移離選單。
`data-closing-time`	`數字`	`500`	在滑鼠離開事件中延遲關閉子選單的時間量。
`data-alignment`	`字串`	`auto`	選單相對於子選單應開啟方向的位置。由 JS 處理。可以是 `'auto'`、`'left'` 或 `'right'`。
`data-close-on-click`	`布林值`	`true`	允許按一下主體關閉任何開啟的子選單。
`data-close-on-click-inside`	`布林值`	`true`	允許點擊葉狀錨點連結以關閉任何開啟的子選單。
`data-vertical-class`	`字串`	`vertical`	套用於垂直導向選單的類別，Foundation 預設為 `vertical`。如果您使用自己的類別，請更新此設定。
`data-right-class`	`字串`	`align-right`	套用於右側導向選單的類別，Foundation 預設為 `align-right`。如果您使用自己的類別，請更新此設定。
`data-force-follow`	`布林值`	`true`	布林值，用於強制覆寫連結的點擊動作，以在行動裝置的第二次觸控事件中執行預設動作。

事件

這些事件將從附加了下拉選單外掛程式的任何元素中觸發。

名稱	說明
`show.zf.dropdownMenu`	當新的下拉式窗格可見時觸發。
`hide.zf.dropdownMenu`	當開啟的選單關閉時觸發。

方法

_destroy

$('#element').foundation('_destroy');

摧毀外掛程式。