Tudor Tudor - 5 months ago 21
Javascript Question

Responsive menu has dropdown bug when cycling through media queries

So I have been using this megamenu template from https://github.com/marioloncarek/megamenu-js

I also uploaded a working version here:
http://mateitudor.com/megamenu/

It's untouched from the original version by the author.
Everything is perfect except when I resize the window to a mobile size and activate two dropdowns, it creates havoc for the desktop version.

I would like it to:

1. in the case one dropdown is clicked on mobile, to be present on desktop;
2. in the case two dropdowns are clicked on mobile, to revert them to the hidden state on desktop (— would this be a good design pattern?);


Sorry for my incoherence, it is 5:39 am, so instead I have attached a more expressive .gif.

Any help would be greatly appreciated.
Thank you.

Later edit, what I've tried, unsuccessfully:
To see if the browser is bigger than the mobile mediaquery and if there are menus open, hide() them. But I did something wrong and it failed miserably.

the bug

Answer

The original author of this template posted the fix, here.

And the code, if you want it here:

$(window).resize(function() {
  $(".menu > ul > li").children("ul").hide();
  $(".menu > ul").removeClass('show-on-mobile');
});

The working code here: http://codepen.io/riogrande/pen/gMMdRa