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>
Ouvrir cet extrait dans le 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>
Ouvrir cet extrait dans le 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.

Besoin d'une aide supplémentaire ?

Vous avez lu ce document une douzaine de fois mais il ne répond pas à toutes vos questions ? D'autres personnes ont peut-être eu le même sentiment. Contactez-les sur Stack Overflow.

Se rendre sur Stack Overflow
Vous avez trouvé un bug ou une fonctionnalité manquante ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Se rendre sur GitHub