回應式導覽

JavaScript

我們的三個選單樣式像無敵鐵金剛一樣組成一個回應式選單外掛程式，讓您可以在不同的螢幕尺寸之間切換樣式。

選單內建一些回應式 CSS 類別，讓您可以在不同的螢幕尺寸重新調整選單方向。

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

選單可以搭配三個不同的外掛程式之一進行擴充：下拉式選單、鑽選式選單或手風琴選單。不過，這些樣式通常最適合特定的螢幕尺寸。

使用我們的回應式選單外掛程式，您可以將預設樣式套用至選單，然後在其他螢幕尺寸變更該樣式。

一些選單組合（但不僅限於這些組合）為

鑽探式下拉式選單
手風琴式下拉式選單
鑽探式手風琴式選單

鑽探式選單在行動裝置上運作良好，但在較大的螢幕上，您可能想要將相同的選單轉換成下拉式選單。以下是一個範例，說明如何執行此操作

觀看影片中的這部分

<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
  <li>
    <a href="#">Item 1</a>
    <ul class="vertical menu">
      <li>
        <a href="#">Item 1A</a>
        <ul class="vertical menu">
          <li><a href="#">Item 1A</a></li>
          <li><a href="#">Item 1B</a></li>
          <li><a href="#">Item 1C</a></li>
          <li><a href="#">Item 1D</a></li>
          <li><a href="#">Item 1E</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="vertical menu">
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 3</a>
    <ul class="vertical menu">
      <li><a href="#">Item 3A</a></li>
      <li><a href="#">Item 3B</a></li>
    </ul>
  </li>
</ul>

錯誤 (v6.3.1)：鑽探式下拉式選單組合中有一個錯誤。如果您在小型裝置上設定一個具有鑽探功能的回應式選單，然後在中型裝置上設定下拉式選單，並將裝置大小調整為小型，然後再調整回中型，下拉式選單將無法運作。此錯誤可以在這裡複製
好消息：此錯誤將在即將推出的 Foundation 版本中修復。如果您特別使用 v6.3.1，我們建議您使用以下修補程式來修復此錯誤。

// Patch for a Bug in v6.3.1
$(window).on('changed.zf.mediaquery', function() {
  $('.is-dropdown-submenu.invisible').removeClass('invisible');
});

與鑽探式選單相同，手風琴式選單在行動裝置上運作良好，但在較大的螢幕上，您可能想要將相同的選單轉換成下拉式選單。以下是相同的範例

<ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown">
  <li>
    <a href="#">Item 1</a>
    <ul class="vertical menu">
      <li>
        <a href="#">Item 1A</a>
        <ul class="vertical menu">
          <li><a href="#">Item 1A</a></li>
          <li><a href="#">Item 1B</a></li>
          <li><a href="#">Item 1C</a></li>
          <li><a href="#">Item 1D</a></li>
          <li><a href="#">Item 1E</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="vertical menu">
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 3</a>
    <ul class="vertical menu">
      <li><a href="#">Item 3A</a></li>
      <li><a href="#">Item 3B</a></li>
    </ul>
  </li>
</ul>

就像 Foundation 文件本身一樣（請參閱左側側邊欄），手風琴式選單非常適合用於桌上型電腦網站的側邊欄，但對於行動裝置，您可能需要鑽探式選單。

<ul class="vertical menu" data-responsive-menu="drilldown medium-accordion" style="max-width: 250px;">
  <li>
    <a href="#">Item 1</a>
    <ul class="vertical menu">
      <li>
        <a href="#">Item 1A</a>
        <ul class="vertical menu">
          <li><a href="#">Item 1A</a></li>
          <li><a href="#">Item 1B</a></li>
          <li><a href="#">Item 1C</a></li>
          <li><a href="#">Item 1D</a></li>
          <li><a href="#">Item 1E</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="vertical menu">
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 3</a>
    <ul class="vertical menu">
      <li><a href="#">Item 3A</a></li>
      <li><a href="#">Item 3B</a></li>
    </ul>
  </li>
</ul>

回應式切換

在 Foundation 5 中，頂部欄將此選單切換概念組合成一個外掛程式。我們現在有一個獨立的選用元件，您可以與回應式外掛程式搭配使用。它稱為標題欄，它允許您在行動裝置上快速設定選單切換。標題欄會在較大的螢幕上隱藏自身。

要設定它，首先為您的選單提供一個唯一的 ID。（您甚至不需要使用選單！任何元素都可以使用。）接下來，新增一個標題欄，其類別為 .title-bar，屬性為 data-responsive-toggle。data-responsive-toggle 的值應該是您要切換的選單的 ID。最後，將 data-toggle 新增到將觸發切換的元素。data-toggle 的值也應該是您要切換的選單的 ID。

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

觀看影片中的這部分

縮小瀏覽器比例，即可看到切換發生。

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

<div class="top-bar" id="example-menu">
  <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>

選單

具動畫效果的回應式切換

若要使用 Motion UI 函式庫中的動畫，請包含 data-animate="someAnimationIn someAnimationOut" 屬性。

縮小瀏覽器比例，即可看到切換發生。

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

<div class="top-bar" id="example-animated-menu" data-animate="hinge-in-from-top spin-out">
  <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>

選單

防止 FOUC

在頁面上的 JavaScript 載入之前，您將能夠同時看到行動裝置和電腦元素，時間約一秒。這稱為未套用樣式的內容閃爍。框架沒有簡單的方法可以為您處理此問題，但您可以新增一些額外的 CSS 來解決此問題。

如果我們參照上述範例，.title-bar 是我們的行動裝置元素，而 .top-bar 是我們的電腦元素。因此，在 JavaScript 載入之前，我們只希望針對該螢幕大小顯示正確的元素。

.no-js .top-bar {
  display: none;
}

@media screen and (min-width: 40em) {
  .no-js .top-bar {
    display: block;
  }

  .no-js .title-bar {
    display: none;
  }
}

如果您使用 Sass，可以像這樣撰寫

.no-js {
  @include breakpoint(small only) {
    .top-bar {
      display: none;
    }
  }

  @include breakpoint(medium) {
    .title-bar {
      display: none;
    }
  }
}

JavaScript 參考

初始化

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

foundation.core.js
foundation.responsiveMenu.js
- 包含實用程式函式庫 foundation.util.triggers.js
- 包含實用程式函式庫 foundation.util.mediaQuery.js
foundation.responsiveToggle.js
- 包含實用程式函式庫 foundation.util.mediaQuery.js
- 包含實用程式函式庫 foundation.util.motion.js

Foundation.ResponsiveMenu

建立回應式選單的新執行個體。

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

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

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

Foundation.ResponsiveToggle

建立標籤列的新執行個體。

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

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

名稱	類型	說明
`element`	jQuery	要附加標籤列功能的 jQuery 物件。
`options`	物件	覆寫預設外掛程式設定。

外掛選項

使用這些選項自訂「回應式導覽」實例。外掛選項可以設定為個別資料屬性、一個合併的 data-options 屬性，或作為傳遞給外掛建構函式的物件。深入了解 JavaScript 外掛如何初始化。

名稱	類型	預設	說明
`data-hide-for`	`字串`	`medium`	在該斷點之後，選單會一直顯示，而標籤列會隱藏。
`data-animate`	`布林值`	`false`	決定切換是否應為動畫。

事件

這些事件會從附加了「回應式導覽」外掛的任何元素觸發。

名稱	說明
`toggled.zf.responsiveToggle`	附加到標籤列的元素切換時觸發。

方法

_destroy

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

摧毀此元素上目前外掛的實例，以及切換外掛的視窗大小處理常式。

toggleMenu

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

切換附加到標籤列的元素。切換只會在螢幕夠小允許切換時發生。

觸發這些事件： ResponsiveToggle#event:toggled

回應式選單

鑽探式下拉式選單

手風琴式下拉式選單

鑽探式手風琴式選單

回應式切換

具動畫效果的回應式切換

防止 FOUC

JavaScript 參考

初始化

Foundation.ResponsiveMenu

Foundation.ResponsiveToggle

外掛選項

事件

方法

_destroy

toggleMenu