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

amp-sidebar

实验性

Bento

描述

提供了一种显示临时访问的元内容（例如导航、链接、按钮、菜单）的方式。

必需的脚本

AMP Bento（独立）

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

<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.2.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-sidebar-0.2.css">

支持的布局

nodisplay

用法

提供一种显示临时访问的元内容（例如导航、链接、按钮、菜单）的方式。可以通过点击按钮显示侧边栏，而主要内容在视觉上保持在下方。

<amp-sidebar> 隐藏临时访问的元内容（导航链接、按钮、菜单等）。可以通过点击按钮以及点击 amp-sidebar 之外的区域来打开和关闭 <amp-sidebar>。但是，可以使用接受媒体查询的可选属性来在网站的其他部分显示元内容。子元素 <nav toolbar="(媒体查询)" toolbar-target="elementID"> 允许在主内容的其他部分显示侧边栏中的内容。

侧边栏只能出现在页面的左侧或右侧。
<amp-sidebar> 可以包含任何有效的 HTML 元素（受 AMP 支持）。
<amp-sidebar> 可以包含以下任何 AMP 元素
- <amp-accordion>
- <amp-img>
- <amp-fit-text>
- <amp-list>
- <amp-live-list>
- <amp-social-share>
侧边栏的最大高度为 100vh，如果高度超过 100vh，则会出现垂直滚动条。默认高度在 CSS 中设置为 100vh，并且可以在 CSS 中覆盖。
可以使用 CSS 设置和调整侧边栏的宽度（最小宽度为 45px）。
当侧边栏打开时，在 amp-sidebar 及其遮罩上禁用触摸缩放。
建议将 <amp-sidebar> 作为 <body> 的直接子元素，以保留逻辑 DOM 顺序（为了可访问性）并避免容器元素改变其行为。请注意，如果 amp-sidebar 的祖先设置了 z-index，可能会导致侧边栏出现在其他元素（例如标题）下方，从而破坏其功能。

示例

在以下示例中，我们使用 amp-sidebar 来包含导航项。但是，第二个和第四个项（导航项 2 和导航项 4）被分配给页面上的元素 ID。通过使用 on 属性，我们可以使用元素 ID 和 scrollTo 平滑滚动到该元素。

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
    <li>Nav item 3</li>
    <li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>
</amp-sidebar>

在有效的 AMP 文档之外独立使用

Bento 允许您在非 AMP 页面中使用 AMP 组件，而无需完全提交有效的 AMP。您可以将这些组件放置在不支持 AMP 的框架和 CMS 的实现中。请在我们的指南在非 AMP 页面中使用 AMP 组件中阅读更多信息。

要查找 amp-sidebar 的独立版本，请参阅 bento-sidebar。

要在点击或单击元素时切换、打开或关闭侧边栏，请在元素上设置 on 操作属性，并指定以下操作方法之一

操作	描述
open（默认）	打开侧边栏
close	关闭侧边栏
toggle	切换侧边栏状态

如果用户点击部分可见的主内容区域，则会关闭侧边栏。

或者，按下键盘上的 Esc 键也会关闭侧边栏。

示例

<button class="hamburger" on="tap:sidebar1.toggle"></button>
<button on="tap:sidebar1">Open</button>
<button on="tap:sidebar1.open">Open</button>
<button on="tap:sidebar1.close">x</button>

您可以通过指定带有媒体查询的 toolbar 属性和带有 <amp-sidebar> 的子元素 <nav> 的元素 ID 的 toolbar-target 属性来创建一个显示在 <body> 中的 toolbar 元素。toolbar 会复制 <nav> 元素及其子元素，并将该元素附加到 toolbar-target 元素中。

行为

侧边栏可以通过添加具有 toolbar 属性和 toolbar-target 属性的 nav 元素来实现工具栏。
nav 元素必须是 <amp-sidebar> 的子元素，并遵循以下格式：<nav toolbar="(媒体查询)" toolbar-target="elementID">。
- 例如，以下是工具栏的有效用法：<nav toolbar="(max-width: 1024px)" toolbar-target="target-element">。
包含工具栏属性的 nav 只能包含一个 <ul> 或 <ol> 元素，该元素包含 <li> 元素。
- <li> 元素可以包含任何有效的 HTML 元素（受 AMP 支持）或 <amp-sidebar> 支持的任何 AMP 元素。
工具栏行为仅在 toolbar 属性媒体查询有效时应用。此外，页面上必须存在具有 toolbar-target 属性 ID 的元素，才能应用工具栏。

示例：基本工具栏

在以下示例中，如果窗口宽度小于或等于 767px，则会显示一个 toolbar。toolbar 包含一个搜索输入元素。toolbar 元素将附加到 <div id="target-element"> 元素。

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
    <li>Nav item 3</li>
    <li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>

  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
    <ul>
      <li>
        <input placeholder="Search..." />
      </li>
    </ul>
  </nav>
</amp-sidebar>

<div id="target-element"></div>

<amp-sidebar> 元素中的 toolbar 元素将根据 toolbar-target 元素是显示还是隐藏，将类应用于该元素。这对于在 toolbar 元素和 toolbar-target 元素上应用不同的样式非常有用。这些类是 amp-sidebar-toolbar-target-shown 和 amp-sidebar-toolbar-target-hidden。当显示 toolbar-target 元素时，amp-sidebar-toolbar-target-shown 类将应用于 toolbar 元素。当隐藏 toolbar-target 元素时，amp-sidebar-toolbar-target-hidden 类将应用于 toolbar 元素。此外，可以通过 amp-sidebar-mask 自定义遮罩的不透明度。

示例：工具栏状态类

在以下示例中，如果窗口宽度小于或等于 767px，则会显示一个 toolbar。toolbar 包含一个搜索输入元素。toolbar 元素将附加到 <div id="target-element"> 元素。但是，我们添加了一些自定义样式来隐藏 toolbar 元素，当显示 <div id="toolbar-target"> 元素时。

<style amp-custom="">
  .amp-sidebar-toolbar-target-shown {
    display: none;
  }
</style>

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
    <li>Nav item 3</li>
    <li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>

  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
    <ul>
      <li>
        <input placeholder="Search..." />
      </li>
    </ul>
  </nav>
</amp-sidebar>

<div id="target-element"></div>

在溢出区域内自动滚动

在侧边栏和工具栏的情况下，amp-sidebar 可以自动将溢出容器滚动到第一个使用 autoscroll 作为属性修饰的元素。

当处理长导航列表并希望侧边栏在页面加载时滚动到当前导航项时，此功能非常有用。

当使用 toolbar 功能时，autoscroll 仅在 <nav toolbar> 元素设置为 overflow: auto 或 overflow: scroll 时才有效。

<style amp-custom="">
  nav [toolbar] {
    overflow: auto;
  }
</style>

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
    <ul>
      <li>Nav item 1</li>
      <li>Nav item 2</li>
      <li>Nav item 3</li>
      <li autoscroll class="currentPage">Nav item 4</li>
      <li>Nav item 5</li>
      <li>Nav item 6</li>
    </ul>
  </nav>
</amp-sidebar>

<div id="target-element"></div>

请参阅此示例文件以获取可工作的示例代码。

构建嵌套菜单

<amp-sidebar> 通过名为 <amp-nested-menu> 的子组件支持向下钻取（嵌套）菜单。通过 <amp-nested-menu>，<amp-sidebar> 可以支持嵌套一层或多层子菜单（以及它们之间的转换），如下面的示例所示

当使用 amp-nested-menu 时，将每个菜单项包装在 li 元素中，以提高可访问性和键盘支持。

<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>
              </div>
            </li>
          </ul>
        </div>
      </li>
      <li>
        <a href="https://amp.js.cn/">Link</a>
      </li>
    </ul>
  </amp-nested-menu>
</amp-sidebar>

在 Playground 中打开此代码片段

请参阅 <amp-nested-menu> 以获取有关嵌套菜单的完整文档，以及动态内容加载等高级功能。

用户体验注意事项

当使用 <amp-sidebar> 时，请记住您的用户通常会在 AMP 查看器中通过移动设备查看您的页面，这可能会显示一个固定位置的标题。此外，浏览器通常会在页面顶部显示自己的固定标题。在屏幕顶部添加另一个固定位置的元素会占用大量的移动屏幕空间，而这些内容不会给用户提供任何新信息。

因此，我们建议不要将打开侧边栏的辅助功能放置在固定的全宽标题中。

属性

side

指示侧边栏应从页面的哪一侧打开，可以是 left 或 right。如果未指定 side，则 side 值将从 body 标记的 dir 属性继承（ltr => left，rtl => right）；如果不存在 dir，则 side 默认为 left。

layout

指定侧边栏的显示布局，必须为 nodisplay。

open

当侧边栏打开时，此属性存在。

data-close-button-aria-label

可选属性，用于为添加的关闭按钮设置 ARIA 标签，以实现可访问性。

toolbar

此属性存在于子元素 <nav toolbar="(媒体查询)" toolbar-target="elementID"> 中，并接受显示工具栏时的媒体查询。请参阅工具栏部分，以获取有关使用工具栏的更多信息。

此属性存在于子元素 <nav toolbar="(media-query)" toolbar-target="elementID"> 上，并接受页面上元素的 ID。toolbar-target 属性会将工具栏放置到页面上指定 ID 的元素中，而不会使用默认的工具栏样式。有关使用工具栏的更多信息，请参阅工具栏部分。

data-disable-swipe-close

在 amp-sidebar 上包含此属性会禁用滑动关闭。当使用移动设备或其他支持触摸的设备时，将禁用滑动关闭侧边栏的功能。

通用属性

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

样式

可以使用标准 CSS 对 amp-sidebar 组件进行样式设置。

可以设置 amp-sidebar 的 width 来调整预设的最小值 (45px) 和最大值 (80vw) 之间的宽度。
如果需要，可以设置 amp-sidebar 的高度来调整侧边栏的高度。如果高度超过 100vw，侧边栏将具有垂直滚动条。侧边栏的预设高度为 100vw，可以在 CSS 中覆盖以使其更短。
当侧边栏在页面上打开时，侧边栏的当前状态通过在 amp-sidebar 标签上设置的 open 属性公开。

请访问 AMP Start，获取可以在您的 AMP 页面中使用的响应式、预先设置样式的导航菜单。

验证

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

需要更多帮助？

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

前往 Stack Overflow

发现错误或缺少功能？

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

前往 GitHub

amp-sidebar 1.0 0.2 0.1

描述