Script doesn't apply evenly to hidden elements that appear later

[lnicks]

I'm working on a responsive design and for our desktop sites we're using this menu.

On a lower breakpoint, we hide the mega menu in favor of a condensed mobile navigation.

If a user loads the page so that the mega menu is hidden, then changes the viewport of the window so that it eclipses the breakpoint, the script is applied unevenly. In particular, the open class doesn't get added to the parent h2 when you have a panel open.

I cannot tell if this is desired behavior or not since some elements get the right items but some do not.

[majornista]

Hi Lloyd,

I think I'd need to see an example of your particular implementation to offer a suggestion as to where the problem may lie.

[dcooney]

First, Thanks for a great script! Love this and it was so easy to implement.

I have pretty much the same issue as above, except for the pain point for me is the accessibleMegaMenu() function messes up only navigation items without mega menu dropdowns.

To get around this I wrapped the accessibleMegaMenu() function inside a window.resize() function with a flag (true/false) to execute. This way accessibleMegaMenu() will only execute once and only on desktop versions.

var isAccessibleFlag = false,
mobileWidth= 1025;
    accessibleNav = function(){
        if($(window).width() > mobileWidth && !isAccessibleFlag){
            /*
                Wrap accessibleMegaMenu() in window.width()
                ** bug fix for screens that load less than mobileWidth. Since the nav is display:none on load the JS fires and does not init properly. If user resizes screen the nav is borked.**          
            */
            $('.main-nav-menu').accessibleMegaMenu({    
            panelClass     : "drop",
            panelGroupClass: "wrap",
            });
            isAccessibleFlag = true;
        }
    };
    accessibleNav();

       var timeOut = null,
    screenWidth = $(window).width();
    window.onresize = function() {
        if (timeOut !== null) clearTimeout(timeOut);
        timeOut = setTimeout(function() {
            screenWidth = $(window).width();
            if(screenWidth > mobileWidth){
            accessibleNav();
            }
        }, 500);
    };

To clarify, the issue occurs when:

• loading a website and accessibleMegaMenu() is fired on an element that is set to display:none;, for example loading the site in mobile view (http://cl.ly/image/271L1m1h3x0O)
• if you resize the screen to desktop view and the element is then set to display:block; some navigation items are misaligned or completely removed from the navigation (http://cl.ly/image/0R1c0F2y1j3v vs http://cl.ly/image/2I3S1J2L1c3T)
• the missing nav items do NOT have mega menus and are just nav items.

It appears that the Issue only presents itself on navigation items that do not have mega menu/dropdowns.

Does this help? Or is it more confusing? :)

[jthompsonDuo]

It took me some time to figure out exactly why I was experiencing this same bug. But once I did, this post helped me resolve, so thank you!!!

My actual solution was a bit simpler, but I think my implementation was fairly straightforward. But will share here if it helps anyone..

`// Set default status... var megaStatus = false;

var checkWindowSize = function() {
  if (window.matchMedia("(min-width: 1024px)").matches) {
    triggerMegaMenu();
  }
}

$(window).on("load scroll resize",function(e){
  checkWindowSize();
});

// --> Trigger accessible menu just 1x...
var triggerMegaMenu = function() {

  if (!megaStatus) {

  // Loads with lower z-index to avoid FOUC 
   $('.mega.fouc').removeClass('fouc');
    megaStatus = true; // so only fires 1x

    $('.block-main.main-navigation').accessibleMegaMenu({
      /* prefix for generated unique id attributes, which are required 
        to indicate aria-owns, aria-controls and aria-labelledby */
      uuidPrefix: 'accessible-megamenu',
      menuClass: 'nav-menu',
      topNavItemClass: 'nav-item',
      panelClass: 'sub-nav',
      panelGroupClass: 'sub-nav-group',
      hoverClass: 'hover',
      focusClass: 'focus',
      openClass: 'open',
      openOnMouseover: true
    });
  }
}

})`