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 元件的通用屬性。

動作

reset (重設)

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

樣式設定

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

無障礙功能

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

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

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

向左鍵：如果子選單已開啟，則關閉它並返回父選單。
向右鍵：如果子選單開啟元素具有焦點，則開啟對應的子選單。
向上/向下鍵：在選單內的項目之間移動焦點 (僅當所有選單項目都包裝在相同清單下的 li 元素內時，此功能才有效)。
END/HOME 鍵：將焦點移動到選單內的第一個/最後一個項目 (類似於 向上/向下鍵)

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

驗證

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

需要更多協助嗎？

您已經閱讀這份文件很多次，但它仍然沒有真正涵蓋您的所有問題嗎？也許其他人也有相同的感受：在 Stack Overflow 上與他們交流。

前往 Stack Overflow

發現錯誤或缺少功能？

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

前往 GitHub