Menu Overlay

Customization	Reference
HTML selector	🔧 [data-arts-component-name="MenuOverlay"]
Component source	📄 HTML/js/components/MenuOverlay.js
Component source (gulp)	📄 SOURCE/components/menuOverlay/MenuOverlay.js

Default Options

defaults: {
  matchMedia: '(min-width: 992px)',
  loop: true,
  autoCenterCurrentItem: true,
  scroll: app.options.virtualScroll,
  type: 'wheel,touch',
  wheelSpeed: -1,
  speedEffect: {
    skew: -0.1,
    scale: -0.1,
  }
}

HTML Markup

<ul
  class="menu-overlay"
  data-arts-component-name="MenuOverlay"
  data-arts-component-options="{}"
>
  <li>
    <a class="overlay-menu-item" href="#" data-arts-split-text-preset="overlayMenuItem">
      <div class="menu-overlay__heading">Menu Item 1</div>
      <div class="menu-overlay__counter ui-element">
        <span class="strong">01</span>
      </div>
    </a>
  </li>
  <li>
    <a class="overlay-menu-item" href="#" data-arts-split-text-preset="overlayMenuItem">
      <div class="menu-overlay__heading">Menu Item 2</div>
      <div class="menu-overlay__counter ui-element">
        <span class="strong">02</span>
      </div>
    </a>
  </li>
  <li class="menu-item-has-children">
    <a class="overlay-menu-item" href="#" data-arts-split-text-preset="overlayMenuItem">
      <div class="menu-overlay__heading">Menu Item 3</div>
      <div class="menu-overlay__counter ui-element">
        <span class="strong">03</span>
      </div>
    </a>
    <ul class="sub-menu">
      <li>
        <a class="overlay-submenu-item" href="#" data-arts-split-text-preset="overlayMenuItem">
          <div class="menu-overlay__heading">Submenu Item 3.1</div>
        </a>
      </li>
      <li>
        <a class="overlay-submenu-item" href="#" data-arts-split-text-preset="overlayMenuItem">
          <div class="menu-overlay__heading">Submenu Item 3.2</div>
        </a>
      </li>
      <li>
        <a class="overlay-submenu-item" href="#" data-arts-split-text-preset="overlayMenuItem">
          <div class="menu-overlay__heading">Submenu Item 3.3</div>
        </a>
      </li>
    </ul>
  </li>
  <li class="menu-item-has-children current-menu-ancestor">
    <a class="overlay-menu-item" href="#" data-arts-split-text-preset="overlayMenuItem">
      <div class="menu-overlay__heading">Menu Item 4 (current)</div>
      <div class="menu-overlay__counter ui-element">
        <span class="strong">04</span>
      </div>
    </a>
    <ul class="sub-menu">
      <li class="menu-item-has-children current-menu-ancestor">
        <a class="overlay-menu-item" href="#" data-arts-split-text-preset="overlayMenuItem">Submenu Item 4.1 (current)</a>
        <ul class="sub-menu">
          <li class="current-menu-item">
            <a class="overlay-submenu-item" href="#" data-arts-split-text-preset="overlayMenuItem">
              <div class="menu-overlay__heading">Submenu Item 4.1.1 (current)</div>
            </a>
          </li>
          <li>
            <a class="overlay-submenu-item" href="#" data-arts-split-text-preset="overlayMenuItem">
              <div class="menu-overlay__heading">Submenu Item 4.1.2</div>
            </a>
          </li>
          <li>
            <a class="overlay-submenu-item" href="#" data-arts-split-text-preset="overlayMenuItem">
              <div class="menu-overlay__heading">Submenu Item 4.1.3</div>
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a class="overlay-submenu-item" href="#" data-arts-split-text-preset="overlayMenuItem">
          <div class="menu-overlay__heading">Submenu Item 4.2</div>
        </a>
      </li>
    </ul>
  </li>
</ul>