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>

在 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 事件结合使用，以在侧边栏关闭后重置菜单。

样式

可以使用标准 CSS 设置 <amp-nested-menu> 组件的样式。

可访问性

<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