spz-nested-menu

The example below demonstrates the spz-nested-menu component in standalone use.

• spz-nested-submenu-open: Marks that the element has a submenu.
• spz-nested-submenu: Marks that the submenu of the element. It must be used with the spz-nested-submenu-open attribute.
• spz-nested-submenu-close: Marks a button that returns to the previous menu.

<spz-sidebar layout="nodisplay" id="sidebar" side="left" style="width: 300px;" has-mask>
  <spz-nested-menu layout="fill" side="right">
    <ul>
      <li>
        <a href="#" spz-nested-submenu-open>Nav Item 1</a>

        <ul spz-nested-submenu>
          <li spz-nested-submenu-close>&lt; Back</li>
          <li>Nav Sub Item 1</li>
          <li>Nav Sub Item 2</li>
          <li>
            <a href="#" spz-nested-submenu-open>Nav Sub Item 3</a>

            <ul spz-nested-submenu>
              <li spz-nested-submenu-close>&lt; Back</li>
              <li>Item 1</li>
              <li>Item 2</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Nav Item 2</li>
      <li>Nav Item 3</li>
    </ul>
  </spz-nested-menu>
</spz-sidebar>

<button type="button" @tap="sidebar.open">Open sidebar</button>

Using a few animations to show the element. It has the following values:

• top: Be shown in fly-from-top animation.
• left: Be shown in fly-from-left animation.
• right: Be shown in fly-from-right animation.
• bottom: Be shown in fly-from-bottom animation.

The element will be added a child-open attribute when the element has a child element that is opened.

The submenu will be added a open attribute when the submenu element is opened.

To reset the menu to the first level. It will remove the child-open attribute of the current element and the open attribute of the submenu.