amp-nested-menu

描述

显示一个具有任意嵌套子菜单级别的钻取菜单。

必需脚本

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

支持的布局

填充

用法

<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.org.cn/">Link</a>
      </li>
    </ul>
  </amp-nested-menu>
</amp-sidebar>

在游乐场中打开此代码段

动态内容渲染

使用 <amp-list> 和 amp-mustache 模板从 JSON 端点动态获取 <amp-nested-menu> 的内容。

以下示例通过将 <amp-nested-menu> 嵌套在 <amp-list> 中演示了此功能。

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

在游乐场中打开此代码段

以下是使用的 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