Dropdown.md

Dropdown.md

Code Injection (Site Header)

<style>
    @media (max-width: 63.99em) {
  .c-nav__dropDown {
    margin-left: var(--space-16);
  }
  .c-nav__dropDown .c-nav__item {
    margin-bottom: 0;
  }
}
@media (min-width: 64em) {
  .c-nav__dropDown {
    position: absolute;
    top: var(--space-16);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    padding: var(--space-8);
    border-radius: var(--space-8);
    background-color: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-primary);
  }
  .c-nav__dropDown .c-nav__item {
    margin: 0 !important;
  }
  .c-nav__dropDown .c-nav__link {
    padding: var(--space-8) var(--space-16);
    border-radius: var(--global-border-radius);
  }
  .c-nav__dropDown .c-nav__link:hover, .c-nav__dropDown .c-nav__link:active, .c-nav__dropDown .c-nav__link:focus {
    background-color: var(--color-background-primary);
  }
}
@media (min-width: 64em) {
  .c-nav__item:not(:last-child) {
    margin-right: var(--space-24);
  }
}
@media (max-width: 63.99em) {
  .c-nav__item {
    margin-bottom: var(--space-16);
  }
}
@media (min-width: 64em) {
  .c-nav__item--hasDropDown {
    position: relative;
  }
  .c-nav__item--hasDropDown > .c-nav__link:after {
    content: "↓";
    padding-left: var(--space-4);
  }
  .c-nav__item--hasDropDown:hover > .c-nav__link, .c-nav__item--hasDropDown:active > .c-nav__link, .c-nav__item--hasDropDown:focus > .c-nav__link {
    color: var(--color-text-primary);
  }
  .c-nav__item--hasDropDown:hover .c-nav__dropDown, .c-nav__item--hasDropDown:active .c-nav__dropDown, .c-nav__item--hasDropDown:focus .c-nav__dropDown {
    opacity: 1;
    visibility: visible;
  }
}
</style>

Code Injection (Site Footer)

<script>
  var dropDown_list = [],
    latest_navigation_item,
    nav_list = document.querySelectorAll('.c-nav--left .c-nav__item');

  var newMenuList = [];
  var menuTree = {};

  nav_list.forEach( (item, index) => {
    if(item.childNodes[1].innerText.startsWith('-')) {
      if(menuTree[newMenuList.length - 1]) {
        menuTree[newMenuList.length - 1].push(item);
      } else {
        menuTree[newMenuList.length - 1] = [item];
      }
    } else {
      newMenuList.push(item);
    }
  });

  nav_list = newMenuList.map((item, index) => {
    if(menuTree[index]) {
      let dropdown = document.createElement('ul');
      dropdown.className = 'c-nav__dropDown o-plain-list';

      menuTree[index].forEach(child => {
        dropDown_item_text = child.childNodes[1].innerText;
        child.childNodes[1].innerText = dropDown_item_text.replace('- ', '');
        dropdown.appendChild(child);
      });

      item.className += ' c-nav__item--hasDropDown';
      item.appendChild(dropdown);
    }
    return item;
  });
</script>

Navigation ( - and space before subitems )