Moduł: submenu

W katalogu

|--src/                           →  Pliki źródłowe
|  |--modules/                    →  Moduły: katalog główny
|  |  |--submenu/                   
|  |  |  |--submenu.twig       
|  |  |  |--submenu.scss       
|  |--scripts/                    →  Skrypty: katalog główny
|  |  |--components/                   
|  |  |  |--collapse.js      

CSS

Dostępne wartości do zmiany

Zmienna	Wartość domyślna	Opis
$submenu-link-padding-mobile	rem(24) rem(16) rem(28) rem(52)	padding mobile
$submenu-padding-desktop	rem(24) rem(32) rem(28) rem(68)	padding desktop
$submenu-active-border-radius	0 0 rem(16) rem(16)	zakragelnia aktywnych elementów
$submenu-link-padding-mobile	rem(16) rem(16) rem(16) rem(32)	padding link mobile
$submenu-link-padding-desktop	rem(16) 0 rem(16) rem(80)	padding link desktop

JS

/**
 * Collapse
 *
 * https://medium.com/dailyjs/mimicking-bootstraps-collapse-with-vanilla-javascript-b3bb389040e7
 */

export default function collapse() {

  // Handler that uses various data-* attributes to trigger
  // specific actions, mimicing bootstraps attributes
  const triggers = Array.from(document.querySelectorAll('[data-toggle="collapse"]'));

  window.addEventListener('click', function (event) {
    const element = event.target;
    if (triggers.includes(element)) {
      event.preventDefault();
      const selector = element.getAttribute('data-target');
      const selectorTextClosed = element.getAttribute('data-text-closed');
      const selectorTextOpened = element.getAttribute('data-text-opened');
      collapse(selector, 'toggle');
      if (event.target.classList.contains('collapse-trigger--opened')) {
        element.parentElement.classList.remove('is-active');
        event.target.classList.remove('collapse-trigger--opened');
        if(selectorTextClosed) {
          event.target.innerHTML = selectorTextClosed;
        }
      } else {
        element.parentElement.classList.add('is-active');
        event.target.classList.add('collapse-trigger--opened');
        if(selectorTextOpened) {
          event.target.innerHTML = selectorTextOpened;
        }
      }
    }
  }, false);

  const fnmap = {
    'toggle': 'toggle',
    'show': 'add',
    'hide': 'remove'
  };

  const collapse = (selector, cmd) => {
    const targets = Array.from(document.querySelectorAll(selector));
    targets.forEach(target => {
      target.classList[fnmap[cmd]]('show');
    });
  }

}

HTML

<ul class="submenu">
  <li  class="submenu__links" ><a href="" data-toggle="collapse" data-target=".submenu__links ul">PELLENTEQUE</a>
    <ul>
      <li><a href="" class="submenu__link">Vel maximus libero</a></li>
      <li><a href="" class="submenu__link">Morbi faucibus interdum nisl, vitae imperdiet lorem posuere sit amet. Sed nec dolor at elit ullamcorper </a></li>
      <li><a href="" class="submenu__link">Morbi faucibus interdum nisl</a></li>
    </ul>
  </li>
  <li  class="submenu__links"><a href=""  data-toggle="collapse" data-target=".submenu__links ul">DONEC</a>
    <ul>
      <li><a href="" class="submenu__link">Vel maximus libero</a></li>
      <li><a href="" class="submenu__link">Morbi faucibus interdum nisl, vitae imperdiet lorem posuere sit amet. Sed nec dolor at elit ullamcorper </a></li>
      <li><a href="" class="submenu__link">Morbi faucibus interdum nisl</a></li>
    </ul>
  </li>
  <li  class="submenu__links"><a href=""  data-toggle="collapse" data-target=".submenu__links ul">ANENEAN SIT AMET NUNC ACCUMSAN</a>
    <ul>
      <li><a href="" class="submenu__link">Vel maximus libero</a></li>
      <li><a href="" class="submenu__link">Morbi faucibus interdum nisl, vitae imperdiet lorem posuere sit amet. Sed nec dolor at elit ullamcorper </a></li>
      <li><a href="" class="submenu__link">Morbi faucibus interdum nisl</a></li>
    </ul>
  </li>
</ul>