AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

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

amp-mega-menu

實驗性質

說明

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

 

必要指令碼

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

支援版面配置

用法

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

<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>

可切換的下拉式選單

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

  1. <button> 或具有 role=button 的元素：此元素用於切換下拉式選單容器 (但前提是前者沒有已註冊的輕觸動作)，並在項目之間導覽時接收焦點。
  2. 具有 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-mega-menu> 內巢狀 <amp-list> 來示範此功能。

 
<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> 之間切換。

以下範例會在視窗寬度小於 500 像素時隱藏 <amp-mega-menu>。它會將 <amp-mega-menu> 替換為開啟 <amp-sidebar> 的按鈕。

 
<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 元件。

樣式設定

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

  • <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/空白鍵觸發作用中的選單項目按鈕。
  • 使用 Esc 鍵收合大型選單。

<amp-mega-menu> 目前不支援在滑鼠游標懸停時開啟，因為這涉及使用者體驗和無障礙功能考量。特別是，我們希望避免下列情境：

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

如要進一步瞭解這個主題，請參閱無障礙功能開發人員指南。

驗證

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

需要更多協助嗎？

您已閱讀本文件十幾次，但內容仍未涵蓋您的所有問題？或許其他人也有相同感受：請在 Stack Overflow 上與他們交流。

前往 Stack Overflow
發現錯誤或缺少功能？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對特別感興趣的問題提供一次性的貢獻。

前往 GitHub