AMP

Important: this documentation is not applicable to your currently selected format stories!

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>
Otwórz ten fragment kodu w placu zabaw

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>
Otwórz ten fragment kodu w placu zabaw

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.

Potrzebujesz dodatkowej pomocy?

Znasz już ten dokument na wylot i nadal nie znajdujesz w nim odpowiedzi na wszystkie pytania? Być może inni przeszli to samo: skontaktuj się z nimi na Stack Overflow.

Przejdź do Stack Overflow
Udało Ci się trafić na błąd albo brakuje jakiejś funkcji?

Zdecydowanie zachęcamy do wzięcia udziału! Choć mamy nadzieję, że staniesz się stałym uczestnikiem naszej społeczności open source, to z wdzięcznością przyjmiemy również każdy jednorazowy wkład w kwestie, które są Twoją pasją.

Przejdź do GitHub