amp-mega-menu

实验性

描述

在可展开容器中显示顶级导航内容。

必需脚本

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

支持的布局

fixed-height

用法

显示水平导航栏，其中菜单项在点击时打开/关闭内容容器。

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

在游乐场中打开此代码段

动态内容呈现

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

以下示例通过在 <amp-mega-menu> 内嵌套 <amp-list> 来演示此功能。

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

在游乐场中打开此代码段

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

在游乐场中打开此代码段

属性

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

用于设置辅助功能中添加的关闭按钮的 ARIA 标签的可选属性。

通用属性

此元素包括扩展到 AMP 组件的通用属性。

样式

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

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

在游乐场中打开此代码段

辅助功能

<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 元素的开头和结尾添加了一个不可见的但可通过 Tab 键访问的关闭按钮。

该组件的键盘支持包括

在聚焦时使用左右箭头键在菜单项之间导航。
使用 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>` 进行响应式设计