重要提示：此文档不适用于您当前选择的格式 电子邮件！

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>

可切换的下拉列表

菜单项应具有一个子项（例如，带有点击操作的锚链接或元素），或者如果该项扩展为下拉容器，则应有两个子项。在后一种情况下，这两个子项必须符合以下规范

一个 <button> 或带有 role=button 的元素：此元素用于切换下拉容器（但前提是前者没有注册点击操作），并且在项目之间导航时接收焦点。
一个带有 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.org.cn/">Link</a>
      </li>
    </ul>
  </nav>
</amp-mega-menu>

在 Playground 中打开此代码段

动态内容渲染

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

下面的示例通过将 <amp-list> 嵌套在 <amp-mega-menu> 中来演示此功能。

<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> 之间切换。

下面的示例在视口宽度小于 500px 时隐藏 <amp-mega-menu>。它用一个打开 <amp-sidebar> 的按钮替换 <amp-mega-menu>。

<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 组件的常用属性。

样式

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

<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 元素的开头和结尾添加了一个不可见但可制表的关闭按钮。

该组件的键盘支持包括

左/右箭头键，用于在聚焦时在菜单项之间导航。
Enter/空格键，用于触发活动菜单项按钮。
Esc 键，用于折叠大型菜单。

由于 UX 和辅助功能问题，<amp-mega-menu> 当前不支持悬停时打开。特别是，我们要避免以下情况

用户将光标移到切换下拉菜单的按钮上并单击，这会在悬停时打开后立即关闭下拉菜单。
用户想要单击闭合下拉列表下方的元素，但意外地在悬停时将其打开，而是单击下拉列表内。

有关此主题的更多信息，请参见辅助功能开发人员指南。

验证

请参阅 AMP 验证器规范中的 amp-mega-menu 规则。

需要更多帮助？

您已经阅读本文档十几次了，但它实际上并没有涵盖您所有的问题？也许其他人也有同样的感受：在 Stack Overflow 上联系他们。

转到 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您将成为我们开源社区的长期参与者，但也欢迎您对您特别感兴趣的问题做出一次性贡献。

转到 GitHub

amp-mega-menu

描述

必需的脚本

支持的布局

用法

可切换的下拉列表

动态内容渲染

使用 <amp-sidebar> 进行响应式设计

属性

data-close-button-aria-label（可选）

常用属性

样式

辅助功能

验证

使用 `<amp-sidebar>` 进行响应式设计