重要事項：此文件不適用於您目前選取的格式 stories！

amp-mega-menu

實驗性

說明

在可展開的容器內顯示頂層導覽內容。

必要腳本

<script async custom-element="amp-mega-menu" src="https://cdn.ampproject.org/v0/amp-mega-menu-0.1.js"></script>

支援的版面配置

fixed-height (固定高度)

用法

顯示水平導覽列，其中包含在點擊時開啟/關閉內容容器的選單項目。

<amp-mega-menu> 提供一種在 AMP 頁面頂端組織和顯示大量導覽內容的方式。此元件主要用於桌機和平板電腦的使用案例，並且可以與 <amp-sidebar> 共同使用，以建立響應式選單。

<amp-mega-menu> 元件包含單一 <nav> 元素，其中包含 <ul> 或 <ol>，而每個 <li> 元素都是一個選單項目。

<nav> 元素必須由 <amp-mega-menu> 元件或 <template> 作為父元素，並且必須將 <ul> 或 <ol> 作為其唯一子元素。

每個選單項目都可以包含以下任何標籤作為直接子元素

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
<a>
<button>
<span>
<div>

可切換的下拉式選單

選單項目應有一個子元素 (例如錨點連結或具有點擊動作的元素)，或者如果項目展開為下拉式容器，則應有兩個子元素。在後一種情況下，這兩個子元素必須符合以下規格

<button> 或具有 role=button 的元素：此元素用於切換下拉式容器 (但前提是前者沒有註冊點擊動作)，並且在項目之間導覽時會接收焦點。
具有 role=dialog 的 <div>：此元素將呈現為一個容器，其中包含項目下的其他內容，並且最初是隱藏的。

當下拉式選單開啟時，遮罩將覆蓋頁面的其餘部分。標題橫幅等內容可以顯示在遮罩上方。在內容上套用背景顏色，並將其與 <amp-mega-menu> 一起放置在 <header> 元素內。

每個下拉式選單可以包含以下任何 AMP 元素

<amp-ad>
<amp-carousel>
<amp-form>
<amp-img>
<amp-lightbox>
<amp-list>
<amp-video>

以下範例示範具有三個選單項目的 <amp-mega-menu>。前兩個是可切換的，第三個是外部連結。

<amp-mega-menu height="30" layout="fixed-height">
  <nav>
    <ul>
      <li>
        <span role="button">Image</span>
        <div role="dialog">
          <amp-img
            src="/static/inline-examples/images/image1.jpg"
            width="300"
            height="200"
          ></amp-img>
        </div>
      </li>
      <li>
        <span role="button">List</span>
        <div role="dialog">
          <ol>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
          </ol>
        </div>
      </li>
      <li>
        <a href="https://amp.dev.org.tw/">Link</a>
      </li>
    </ul>
  </nav>
</amp-mega-menu>

在 Playground 中開啟此程式碼片段

動態內容呈現

使用 <amp-list> 和 <amp-mustache> 範本，從 JSON 端點動態擷取 <amp-mega-menu> 的內容。

以下範例透過巢狀結構將 <amp-list> 放入 <amp-mega-menu> 中，示範此功能。

<amp-mega-menu height="60" layout="fixed-height">
  <amp-list
    height="350"
    layout="fixed-height"
    src="/static/samples/json/product-single-item.json"
    single-item
  >
    <template type="amp-mustache">
      <nav>
        <ul>
{{#values}}          <li>
            <h4 role="button">{{name}}</h4>
            <div role="dialog">
              <amp-img
                src="{{img}}"
                width="320"
                height="213"
              ></amp-img>
              <p>Price: $<b>{{price}}</b></p>
            </div>
          </li>
{{/values}}        </ul>
      </nav>
    </template>
  </amp-list>
</amp-mega-menu>

在 Playground 中開啟此程式碼片段

以下是使用的 JSON 檔案

{
  "items": [
    {
      "values": [
        {
          "id": 1,
          "img": "/static/samples/img/product1_640x426.jpg",
          "name": "Apple",
          "price": "1.99"
        },
        {
          "id": 2,
          "img": "/static/samples/img/product2_640x426.jpg",
          "name": "Orange",
          "price": "0.99"
        },
        {
          "id": 3,
          "img": "/static/samples/img/product3_640x426.jpg",
          "name": "Pear",
          "price": "1.50"
        }
      ]
    }
  ]
}

使用 `<amp-sidebar>` 的響應式設計

某些視窗可能太窄，無法在單列中顯示 <amp-mega-menu> 的內容。對於這些使用案例，請使用媒體查詢在 <amp-mega-menu> 和 <amp-sidebar> 之間切換。

以下範例會在視窗寬度小於 500px 時隱藏 <amp-mega-menu>。它會以一個開啟 <amp-sidebar> 的按鈕取代 <amp-mega-menu>。

<head>
  <script
    async
    custom-element="amp-mega-menu"
    src="https://cdn.ampproject.org/v0/amp-mega-menu-0.1.js"
  ></script>
  <script
    async
    custom-element="amp-sidebar"
    src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"
  ></script>
  <script
    async
    custom-element="amp-accordion"
    src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"
  ></script>
  <style amp-custom>
    .sidebar-open-btn {
      font-size: 2em;
      display: none;
    }
    @media (max-width: 500px) {
      #mega-menu {
        display: none;
      }
      .sidebar-open-btn {
        display: block;
      }
    }
  </style>
</head>
<body>
  <header>
    <amp-mega-menu id="mega-menu" height="50" layout="fixed-height">
      <nav>
        <ul>
          <!-- list of menu items here -->
          <li>
            <h4 role="button">menu item</h4>
            <div role="dialog">more content</div>
          </li>
        </ul>
      </nav>
    </amp-mega-menu>
    <button class="sidebar-open-btn" on="tap:sidebar">=</button>
  </header>
  <amp-sidebar id="sidebar" layout="nodisplay">
    <amp-accordion>
      <!-- list of menu items here -->
      <section>
        <h4>menu item</h4>
        <div>more content</div>
      </section>
    </amp-accordion>
  </amp-sidebar>
</body>

在 Playground 中開啟此程式碼片段

屬性

data-close-button-aria-label (選填)

選填屬性，用於設定為提升無障礙功能而新增的關閉按鈕的 ARIA 標籤。

通用屬性

此元素包含通用屬性，這些屬性已擴充至 AMP 元件。

樣式設定

可以使用標準 CSS 設定 <amp-mega-menu> 元件的樣式。

<nav> 元素和下拉式選單元素具有預設的白色背景。
開啟時，下拉式容器將填滿整個視窗寬度。這可以使用 left 和 width 屬性覆寫。
展開選單項目會將 open 屬性套用至 <amp-mega-menu> 元件以及展開的 <li> 元素。

以下範例自訂

導覽列的背景顏色。
已開啟選單按鈕的外觀。
下拉式容器的位置。

<head>
  <script
    async
    custom-element="amp-mega-menu"
    src="https://cdn.ampproject.org/v0/amp-mega-menu-0.1.js"
  ></script>
  <style amp-custom>
    .title {
      background-color: lightblue;
      padding: 0.5em;
      margin: 0;
    }
    amp-mega-menu nav {
      background-color: lightgray;
    }
    amp-mega-menu .menu-item[open] > span {
      background-color: white;
    }
    amp-mega-menu .menu-item[open] > div {
      left: 10px;
      right: 10px;
      width: auto;
    }
  </style>
</head>
<body>
  <header>
    <h1 class="title">styling the amp-mega-menu</h1>
    <amp-mega-menu height="30" layout="fixed-height">
      <nav>
        <ul>
          <li class="menu-item">
            <span role="button">List 1</span>
            <div role="dialog">
              <ol>
                <li>item 1.1</li>
                <li>item 1.2</li>
                <li>item 1.3</li>
              </ol>
            </div>
          </li>
          <li class="menu-item">
            <span role="button">List 2</span>
            <div role="dialog">
              <ol>
                <li>item 2.1</li>
                <li>item 2.2</li>
                <li>item 2.3</li>
              </ol>
            </div>
          </li>
        </ul>
      </nav>
    </amp-mega-menu>
  </header>
</body>

在 Playground 中開啟此程式碼片段

無障礙功能

<amp-mega-menu> 在每個可展開選單項目的子元素上指派以下 ARIA 屬性。螢幕閱讀器使用這些屬性將按鈕與可切換容器建立關聯，並將焦點鎖定在已開啟的容器內。

<li>
  <button aria-expanded aria-controls="unique_id" aria-haspopup="dialog">
    ...
  </button>
  <div role="dialog" aria-modal id="unique_id">
    ...
  </div>
</li>

此外，為了協助螢幕閱讀器使用者，會在每個 role=dialog 元素的開頭和結尾新增一個看不見但可使用 Tab 鍵選取的關閉按鈕。

此元件的鍵盤支援包括

左右箭頭鍵：在選單項目之間導覽 (當焦點在選單項目上時)。
Enter/Space 鍵：觸發作用中的選單項目按鈕。
Esc 鍵：收合大型選單。

<amp-mega-menu> 目前不支援滑鼠懸停時開啟，因為這牽涉到 UX 和無障礙功能方面的考量。特別是，我們想要避免以下情況

使用者將游標移到會切換下拉式選單的按鈕上方並點擊，這會在滑鼠懸停時開啟下拉式選單後立即將其關閉。
使用者想要點擊關閉的下拉式選單下方的元素，但不小心在滑鼠懸停時開啟了下拉式選單，反而點擊了下拉式選單內的內容。

如需關於此主題的更多資訊，請參閱無障礙功能開發人員指南。

驗證

請參閱 AMP 驗證器規格中的 amp-mega-menu 規則。

需要更多協助嗎？

您已閱讀此文件數十次，但它仍然沒有涵蓋您的所有問題嗎？也許其他人也有同感：請在 Stack Overflow 上與他們交流。

前往 Stack Overflow

發現錯誤或缺少功能？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別關注的問題做出一次性的貢獻。

前往 GitHub

amp-mega-menu

說明

必要腳本

支援的版面配置

用法

可切換的下拉式選單

動態內容呈現

使用 <amp-sidebar> 的響應式設計

屬性

data-close-button-aria-label (選填)

通用屬性

樣式設定

無障礙功能

驗證

使用 `<amp-sidebar>` 的響應式設計