AMP

amp-nested-menu

Description

Displays a drilldown menu with arbitrary levels of nested submenus.

 

Required Scripts

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

Supported Layouts

Usage

<amp-nested-menu> enables layered content organization within <amp-sidebar>. A sidebar with <amp-nested-menu> can be used jointly with <amp-mega-menu> to create a responsive menu.

The <amp-nested-menu> component must be placed inside <amp-sidebar>. The component may contain the following AMP elements:

Nested submenus

<amp-nested-menu> supports nesting one or more layers of submenus. It uses the following attributes on its descendants as identifiers for the submenu functionality:

  • amp-nested-submenu: this identifies a hidden submenu container. When opened, the element slides in and takes the place of its parent menu (either <amp-nested-menu> or another submenu).
  • amp-nested-submenu-open: this identifies an element that opens a submenu on tap. It must be a sibling of the said submenu.
  • amp-nested-submenu-close: this identifies an element that closes the closest containing submenu. The element must be the descendant of a submenu.

Only <div> tags may receive the amp-nested-submenu attribute. The submenu open/close attributes can be applied to any of the tags below:

  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • <button>
  • <span>
  • <div>

The following example demonstrates an <amp-nested-menu> with two levels of nested submenus.

<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.dev/">Link</a>
      </li>
    </ul>
  </amp-nested-menu>
</amp-sidebar>
このスニペットを Playground で開く

Dynamic content rendering

Fetch content of <amp-nested-menu> dynamically from a JSON endpoint using <amp-list> and amp-mustache template.

The example below demonstrates this ability by nesting <amp-nested-menu> inside <amp-list>.

<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 で開く

Here is the JSON file used:

{
  "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"
    }
  ]
}

Attributes

side (optional)

Optional attribute that indicates from which side the submenus open from, either left or right. Set to right by default, or left if the document is RTL.

Common attributes

This element includes common attributes extended to AMP components.

Actions

reset

Closes any open submenus and returns to the root menu. Use this in conjunction with sidebar's sidebarClose event to reset the menu after sidebar is closed.

Styling

The <amp-nested-menu> component can be styled with standard CSS.

Accessibility

<amp-nested-menu> assigns role=button and tabindex=0 on each submenu open/close element. When a submenu opens, focus shifts to the submenu close element inside it. When the submenu closes, focus shifts back to the submenu open element that opened it.

Wrap every menu item in a li element to improve accessibility and keyboard support.

The component supports arrow key navigation as follows:

  • LEFT: if a submenu is open, close it and return to the parent menu.
  • RIGHT: if a submenu open element has focus, open the corresponding submenu.
  • UP/DOWN: shift focus between items within a menu (this works only if all menu items are wrapped inside li elements under the same list).
  • END/HOME: shift focus to the first/last item within a menu (similar to UP/DOWN)

If side=left, then the functionalities of LEFT and RIGHT arrow keys are reversed.

Validation

See amp-nested-menu rules in the AMP validator specification.

さらに支援が必要ですか?

このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか?他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。

Stack Overflow にアクセスする
バグや不足している機能がありますか?

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています!当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub にアクセスする