AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

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>

可切换的下拉菜单

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

  1. 具有 role=button 的 <button> 或元素：此元素用于切换下拉容器（但前提是前者没有注册点击操作），并且在项目之间导航时接收焦点。
  2. 带有 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-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>
在 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> 之间切换。

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

 
<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