Mobile Accordion

[iamrobert]

On Mobile we see this huge list with everything expanded. It shows the 2nd level for each section.

Is there away to put it in an accordion like the Mega Menu?

I'm really looking for the equivalent of this:

https://get.foundation/building-blocks/blocks/foundation-5-top-bar.html

[sebastiano-guerriero]

Hi 👋! We have on our roadmap a new header component that, on mobile, behaves like the one you linked. In some cases, it's preferable IMO to have all the navigation options visible. It makes the navigation more accessible IMO. We'll provide an alternative version (new component) where the subnavigation is nested in a side panel 👍

[starchild]

I totally second the need for this. Some of our clients have a TON of sub categories and it simply isn't feasible to have them all open like this.

This current implementation is really limiting and means we have to integrate 3rd party menu plugins to achieve a simple mobile menu that collapses subcats.

[iamrobert]

Which 3rd Party menu system have you been deploying?

[starchild]

@iamrobert - sorry for delay in my reply - we've been using https://computerwolf.github.io/SlickNav/ - it seems to play the nicest with what we want to achieve.

[alexandrebuffet]

I also think it would be really interesting to have this option. Do you plan to update the component with an -expandable-on-mobile variation like you did for the Flexi Header?

[sebastiano-guerriero]

We definitely do. We used the collapse component in the morphing navigation, and we plan on integrating it in all headers that don't have the 'collapse' feature on mobile.

[alexandrebuffet]

Good news! The integration of the morphing navigation component is really great on this point. Does this mean that the mobile and desktop markup will be separated so? Can't wait to see the update anyway!

[iamrobert]

We ended up using the 3_mega-site-navigation.js and made some edits for hover state:

https://www.tokenproducts.com/

token-bikes.webm

Some of the CODE we added:

  function disableLink() {
    var menusLv1 = document.querySelectorAll('a.js-mega-nav__control');
    for (var i = 0, n = menusLv1.length; i < n; ++i) {
      let href = menusLv1[i].getAttribute('href');
      let dropdown = menusLv1[i].parentElement.children[1];
      menusLv1[i].setAttribute('data-href', href);
      menusLv1[i].setAttribute('href', '#');
      menusLv1[i].setAttribute('aria-disabled', 'false');
      //  menusLv1[i].addEventListener('click', preventDefaultListener);
    }

  }

  /* + ENABLE HOVER CLICK FOR DESKTOP/NON TOUCH
    ======================================================================*/
  function enableLink() {

    var menusLv1 = document.querySelectorAll('a.js-mega-nav__control');
    for (var i = 0, n = menusLv1.length; i < n; ++i) {
      if (menusLv1[i].getAttribute('data-href') !== null) {
        menusLv1[i].href = menusLv1[i].getAttribute('data-href');
      }
      menusLv1[i].removeAttribute('aria-disabled');
    }
  }

  /* + ENABLE/DISABLE ON SCREEN SIZE
    ======================================================================*/
  function iamrDisableClick(megaNav) {
    //  console.log(megaNav.layout);

    //1. IF Mobile View
    if (megaNav.layout == 'mobile') {
      disableLink();
    }

    if (megaNav.layout == 'desktop') {
      enableLink();
    }

    //2. If Touch Device
    if ("ontouchstart" in document.documentElement) {
      disableLink();
    }

    window.addEventListener("resize", throttle(detectDevice, 100), {
      passive: true
    });
    detectDevice();

    function detectDevice() {
      //
      const isTouchDevice = () => {
        return window.matchMedia('(hover: none)').matches;
      }

      // console.log(isTouchDevice());

      if (isTouchDevice()) {
        disableLink();
      }

      if (!isTouchDevice() && megaNav.layout == 'desktop') {
        enableLink();
      }
    }

  }