spz-menu

Displays a navigation menu.

布局

Usage

This element will automatically set a --menu-height CSS variable to store the height of the current menu. Set a --menu-quarters CSS variable to store the height sum of the current menu and the rely-id element.

In the example below, use the hover-interact attribute to show the submenu when the user hovers the child element.

spz-menu-content: (required) Indicates the contents of the menu.
dropdown: (required) Indicates the first level menu.
sub-dropdown: Specifies the second or other level menus with inline submenus.
dropdown-menu: Specify the submenus box for the second and other levels.

morelink: Specifies the more link menu.

If the dropdown-menu of morelink nests a template, the template will carry the following data:

{
  "offset": 5, // the currently displayed menu index
  "originData": { // original data
    // ...
  }
}

<spz-menu layout="container" hover-interact>
  <ul spz-menu-content>
    <!-- ... --->
    <li morelink dropdown>
      <div>More Link</div>

      <ul dropdown-menu>
        <template>
          <div>
            ${data.offset}
            <!-- ... -->
          </div>
        </template>
      </ul>
    </li>
  </ul>
</spz-menu>

<spz-menu layout="container" hover-interact>
  <ul spz-menu-content>
    <li dropdown>
      <a href="/item1">Nav Item 1</a>
      <ul dropdown-menu>
        <li>Nav Sub Item 1</li>
        <li>Nav Sub Item 2</li>
        <li sub-dropdown>
          <a href="/subitem1">Three Layer Item 1</a>

          <ul dropdown-menu>
            <li>Item 1</li>
            <li>Item 2</li>
          </ul>
        </li>
      </ul>
    </li>
    <li dropdown>Nav Item 2</li>
    <li dropdown>Nav Item 3</li>

    <li morelink dropdown>
      <div>More Link</div>

      <ul dropdown-menu></ul>
    </li>
  </ul>
</spz-menu>

Attributes

click-interact

If this attribute is present, specify the click to display the submenu.

hover-interact

If this attribute is present, specify the hover to display the submenu. Only one of click-interact or hover-interact can be set, not both at a time.

rely-id

A string of the DOM ID. Set a --menu-quarters of CSS variable to the <html> that is the sum of the menu and the rely-id element heights when the rely-id element is visible.

plugin-id

A string of the DOM ID. Recalculate the menu width when a child element of the plugin-id element changes.

Actions

change

To recalculate the value of the --menu-quarters CSS variable based on the height sum of the rely-id element and the current element.

// implement
const relyId = this.element.getAttribute('rely-id');
const relyElement = document.getElementById(relyId);

const heightSum = this.element.clientHeight + relyElement.clientHeight;

document.documentElement.style.setProperty('--menu-quarters', heightSum);