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

下拉式選單

JavaScript

下拉式選單面板是快樂的小精靈，可以透過點擊或滑鼠懸停顯示。

您可能正在尋找 下拉式選單，這是一個獨立的外掛程式。

基礎知識

若要建立下拉式選單面板，請將類別 .dropdown-pane 和屬性 data-dropdown 加入元素中。也請為下拉式選單提供一個唯一的 ID。

若要建立下拉式選單觸發器，請將 data-toggle 加入 <button> 中。data-toggle 的值為下拉式選單的 ID。

在影片中觀看此部分

edit on codepen button 
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
  Example form in a dropdown.
  <form>
    <div class="grid-container">
      <div class="grid-x grid-margin-x">
        <div class="cell medium-6">
          <label>Name
            <input type="text" placeholder="Kirk, James T.">
          </label>
        </div>
        <div class="cell medium-6">
          <label>Rank
            <input type="text" placeholder="Captain">
          </label>
        </div>
      </div>
    </div>
  </form>
</div>

<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
  Just some junk that needs to be said. Or not. Your choice.
</div>

定位

預設情況下，下拉式選單會固定在開啟按鈕下方。加入類別 .top、.right 或 .bottom 至下拉式選單，以變更此設定。

edit on codepen button 
<button class="button" type="button" data-toggle="example-dropdown2">Top Aligned</button>

<div class="dropdown-pane top" id="example-dropdown2" data-dropdown>
  Just some junk that needs to be said. Or not. Your choice.
</div>

將 .float-right 或 .float-left 加入錨點也會變更下拉式選單的方向。

明確定位

v6.4 新增：請注意！此明確定位模式是 v6.4 的新功能。

如果可以在下拉式選單元素中定義兩個位置，那不是很好嗎？下拉式選單具有完全明確的定位模式，您可以透過該模式同時使用 data-position 和 data-alignment 來定義方塊的兩個位置。

這些下拉式選單測試各種定位和對齊。有效位置為左/右/上/下。有效對齊為左/右/上/下/置中。左對齊表示左側應對齊。右對齊表示右側應對齊。置中對齊表示中心應對齊。

頂部和底部定位

<!-- Bottom Left -->
<button class="button" type="button" data-toggle="example-dropdown-bottom-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left" data-dropdown data-auto-focus="true">
  <!-- My dropdown content in here -->
</div>

<!-- Bottom Center -->
<button class="button" type="button" data-toggle="example-dropdown-bottom-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="bottom" data-alignment="center" id="example-dropdown-bottom-center" data-dropdown data-auto-focus="true">
  <!-- My dropdown content in here -->
</div>

<!-- Bottom Right -->
<button class="button" type="button" data-toggle="example-dropdown-bottom-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right" data-dropdown data-auto-focus="true">
  <!-- My dropdown content in here -->
</div>

<!-- Top Left -->
<button class="button" type="button" data-toggle="example-dropdown-top-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="top" data-alignment="left" id="example-dropdown-top-left" data-dropdown data-auto-focus="true">
  <!-- My dropdown content in here -->
</div>

<!-- Top Center -->
<button class="button" type="button" data-toggle="example-dropdown-top-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="top" data-alignment="center" id="example-dropdown-top-center" data-dropdown data-auto-focus="true">
  <!-- My dropdown content in here -->
</div>

<!-- Top Right -->
<button class="button" type="button" data-toggle="example-dropdown-top-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="top" data-alignment="right" id="example-dropdown-top-right" data-dropdown data-auto-focus="true">
  <!-- My dropdown content in here -->
</div>

左下

底部置中

右下

左上

頂部置中

右上


左和右定位

<!-- Right Top -->
<button class="button" type="button" data-toggle="example-dropdown-right-top">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="right" data-alignment="top" id="example-dropdown-right-top" data-dropdown data-auto-focus="true">
</div>

<!-- Left Top -->
<button class="button" type="button" data-toggle="example-dropdown-left-top">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="left" data-alignment="top" id="example-dropdown-left-top" data-dropdown data-auto-focus="true">
</div>

<!-- Right Center -->
<button class="button" type="button" data-toggle="example-dropdown-right-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="right" data-alignment="center" id="example-dropdown-right-center" data-dropdown data-auto-focus="true">
</div>

<!-- Left Center -->
<button class="button" type="button" data-toggle="example-dropdown-left-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="left" data-alignment="center" id="example-dropdown-left-center" data-dropdown data-auto-focus="true">
</div>

<!-- Right Bottom -->
<button class="button" type="button" data-toggle="example-dropdown-right-bottom">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="right" data-alignment="bottom" id="example-dropdown-right-bottom" data-dropdown data-auto-focus="true">
</div>

<!-- Left Bottom -->
<button class="button" type="button" data-toggle="example-dropdown-left-bottom">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="left" data-alignment="bottom" id="example-dropdown-left-bottom" data-dropdown data-auto-focus="true">
</div>

右上

左上

右中

左中

右下

左下

Sass 參考

變數

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

名稱類型預設值說明
$dropdown-padding 清單 1rem

下拉式窗格的內距。
$dropdown-background 顏色 $body-background

下拉式窗格的背景。
$dropdown-border 清單 1px solid $medium-gray

下拉式窗格的邊框。
$dropdown-font-size 清單 1rem

下拉式窗格的字體大小。
$dropdown-width 數字 300px

下拉式窗格的寬度。
$dropdown-radius 數字 $global-radius

下拉式窗格的邊框半徑。
$dropdown-sizes 對應 tiny: 100px
small: 200px
large: 400px

下拉式窗格的大小。每個大小都是您可以套用的 CSS 類別。

混合

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

@include dropdown-container;

套用基本下拉式選單的樣式。

JavaScript 參考

初始化

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

  • foundation.core.js
  • foundation.dropdown.js
    • 使用工具程式庫 foundation.util.keyboard.js
    • 使用工具程式庫 foundation.util.box.js
    • 使用工具程式庫 foundation.util.touch.js
    • 使用工具程式庫 foundation.util.triggers.js

Foundation.Dropdown

建立下拉式選單的新執行個體。

var elem = new Foundation.Dropdown(element, options);
名稱類型說明
element jQuery 要轉換成下拉式選單的 jQuery 物件。物件應為下拉式選單面板，而非其錨點。
options 物件 覆寫預設外掛設定。

外掛選項

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

名稱 類型 預設值 說明
data-parent-class 字串 null 指定 Dropdown 邊界容器的類別（預設值：視窗）
data-hover-delay 數字 250 在滑鼠移入事件中開啟子選單的延遲時間。
data-hover 布林值 false 允許在滑鼠移入事件中開啟子選單
data-hover-pane 布林值 false 滑鼠移到下拉式選單面板上時，不要關閉下拉式選單
data-v-offset 數字 0 開啟時，下拉式選單面板與觸發元素之間的像素數。
data-h-offset 數字 0 開啟時，下拉式選單面板與觸發元素之間的像素數。
data-position 字串 auto 下拉式選單的位置。可以是左、右、下、上或自動。
data-alignment 字串 auto 下拉式選單相對於錨點的對齊方式。可以是左、右、下、上、置中或自動。
data-allow-overlap 布林值 false 允許容器/視窗重疊。如果為 false，下拉式選單會先嘗試根據 data-position 和 data-alignment 定義的位置，但如果會造成溢位，則會重新定位。
data-allow-bottom-overlap 布林值 true 只允許容器底部重疊。這是下拉式選單最常見的行為，允許下拉式選單延伸到螢幕底部，但不會影響或超出容器。
data-trap-focus 布林值 false 允許外掛將焦點鎖定在使用鍵盤命令開啟的下拉式選單面板上。
data-auto-focus 布林值 false 允許外掛將焦點設定在窗格內第一個可聚焦的元素，不論開啟方式為何。
data-close-on-click 布林值 false 允許點選主體來關閉下拉選單。
data-force-follow 布林值 true 如果為 true，切換的預設動作（例如：追蹤具有 href 的連結）會在點選時執行。如果滑動選項也為 true，則預設動作會在行動裝置/觸控裝置第一次點選時被阻止，並在第二次點選時執行。

事件

這些事件會從附加 Dropdown 外掛的任何元素觸發。

名稱說明
closeme.zf.dropdown 觸發以關閉其他開啟的下拉選單，通常在下拉選單開啟時。
show.zf.dropdown 在下拉選單可見時觸發一次。
hide.zf.dropdown 在下拉選單不再可見時觸發一次。

方法

open

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

開啟下拉選單窗格，並觸發一個冒泡事件以關閉其他下拉選單。

觸發這些事件：Dropdown#event:closeme Dropdown#event:show

close

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

關閉開啟的下拉選單窗格。

觸發這些事件：Dropdown#event:hide

toggle

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

切換下拉選單窗格的可見性。

_destroy

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

摧毀下拉選單。