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

amp-nested-menu

說明

顯示具有任意層級巢狀子選單的鑽取式選單。

必要指令碼

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

支援的版面配置

fill

用法

<amp-nested-menu> 讓您可以在 <amp-sidebar> 中組織分層的內容。具有 <amp-nested-menu> 的側邊欄可以與 <amp-mega-menu> 共同使用，以建立回應式選單。

<amp-nested-menu> 元件必須放置在 <amp-sidebar> 內部。此元件可以包含下列 AMP 元素

巢狀子選單

<amp-nested-menu> 支援巢狀的一或多層子選單。它在其後代元素上使用下列屬性作為子選單功能的識別項

amp-nested-submenu：這會識別隱藏的子選單容器。開啟時，此元素會滑入並取代其父選單（<amp-nested-menu> 或另一個子選單）。
amp-nested-submenu-open：這會識別在點擊時開啟子選單的元素。它必須是所述子選單的同層元素。
amp-nested-submenu-close：這會識別關閉最近的包含子選單的元素。此元素必須是子選單的後代元素。

只有 <div> 標記可以接收 amp-nested-submenu 屬性。子選單開啟/關閉屬性可以套用至下列任何標記

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

下列範例示範具有兩層巢狀子選單的 <amp-nested-menu>。

<button on="tap:sidebar1">Open Sidebar</button>
<amp-sidebar id="sidebar1" layout="nodisplay" style="width:300px">
  <amp-nested-menu layout="fill">
    <ul>
      <li>
        <h4 amp-nested-submenu-open>Open Sub-Menu</h4>
        <div amp-nested-submenu>
          <ul>
            <li>
              <h4 amp-nested-submenu-close>go back</h4>
            </li>
            <li>
              <h4 amp-nested-submenu-open>Open Another Sub-Menu</h4>
              <div amp-nested-submenu>
                <h4 amp-nested-submenu-close>go back</h4>
                <amp-img
                  src="/static/inline-examples/images/image1.jpg"
                  layout="responsive"
                  width="450"
                  height="300"
                ></amp-img>
              </div>
            </li>
          </ul>
        </div>
      </li>
      <li>
        <a href="https://amp.dev.org.tw/">Link</a>
      </li>
    </ul>
  </amp-nested-menu>
</amp-sidebar>

在 playground 中開啟此程式碼片段

動態內容呈現

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

下列範例藉由在 <amp-list> 內部巢狀 <amp-nested-menu> 來示範此功能。

<button on="tap:sidebar2">Open Sidebar</button>
<amp-sidebar id="sidebar2" layout="nodisplay" style="width:300px">
  <amp-list
    layout="fill"
    src="/static/inline-examples/data/amp-list-data.json"
    items="."
    single-item
  >
    <template type="amp-mustache">
      <amp-nested-menu layout="fill">
        <ul>
{{#items}}          <li>
            <h3 amp-nested-submenu-open>{{title}}</h3>
            <div amp-nested-submenu>
              <button amp-nested-submenu-close>close</button>
              <amp-img
                src="{{imageUrl}}"
                layout="responsive"
                width="400"
                height="300"
              ></amp-img>
            </div>
          </li>
{{/items}}        </ul>
      </nav>
    </template>
  </amp-list>
</amp-sidebar>

在 playground 中開啟此程式碼片段

以下是使用的 JSON 檔案

{
  "items": [
    {
      "title": "Image 01",
      "imageUrl": "https://preview.amp.dev/static/inline-examples/images/flowers.jpg"
    },
    {
      "title": "Image 02",
      "imageUrl": "https://preview.amp.dev/static/inline-examples/images/sunset.jpg"
    }
  ]
}

屬性

side (選填)

選填屬性，指出子選單從哪一側開啟，可以是 left 或 right。預設設定為 right，如果文件為 RTL，則為 left。

通用屬性

此元素包含擴充至 AMP 元件的通用屬性。

動作

重設

關閉任何已開啟的子選單，並返回根選單。將此與側邊欄的 sidebarClose 事件搭配使用，以在側邊欄關閉後重設選單。

樣式

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

無障礙功能

<amp-nested-menu> 在每個子選單開啟/關閉元素上指派 role=button 和 tabindex=0。當子選單開啟時，焦點會移至其中的子選單關閉元素。當子選單關閉時，焦點會移回開啟它的子選單開啟元素。

將每個選單項目包裝在 li 元素中，以改善無障礙功能和鍵盤支援。

此元件支援方向鍵導覽，如下所示

LEFT：如果子選單已開啟，請關閉它並返回父選單。
RIGHT：如果子選單開啟元素具有焦點，請開啟對應的子選單。
UP/DOWN：在選單中的項目之間移動焦點（這僅在所有選單項目都包裝在同一清單下的 li 元素中時才有效）。
END/HOME：將焦點移動到選單中的第一個/最後一個項目（與 UP/DOWN 類似）

如果 side=left，則 LEFT 和 RIGHT 方向鍵的功能會反轉。

驗證

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

需要更多協助嗎？

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

前往 Stack Overflow

發現錯誤或缺少功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎針對您特別熱衷的問題提供一次性貢獻。

前往 GitHub