Mega Menus

[keyur8]

Mega Menus always confuse me!

If you’re not using Bootstrap / Foundation, how are people creating their menus?

I could try coding it on my own but worried about browser compatibility. I can’t seem to find a library that it is lightweight and I can add on to my site.

I am happy to pay for a library as well.

Thanks!

[Atelierbram]

Something like https://adobe-accessibility.github.io/Accessible-Mega-Menu/ seems quite good and well maintained but requires jQuery; … too heavy?

[keyur8]

thanks, that looks like it could work.

what do most devs do when creating menus, do they use libraries or code it themselves?

[Atelierbram]

Can only speak for myself, and as always the answer is “it depends”. (Personally nowadays when I client would propose such a mega menu, I would try to steer them towards dedicated landing pages with those links in it, because of mobile-friendliness, but that is besides the point in question). Another concern might be wanting to have a vanilla javaScript solution (without jQuery that is), searching for solid examples of those which are also keyboard accessible will set you on a dedicated quest on the interwebs. Anyway making this all by yourself can be a good exercise or “reinventing the wheel”, depending on time and/or circumstances and/or perspective.

Lately I stumbled upon this “WordPress Component Library” which has a lot of vanilla javaScript Ui components, so for tabs maybe have a look at that one as well to build upon.

Maybe also take a look at the open source projects of Chris Ferdinandi there is usable stuff in there, like “Tabby” for tabs, which may be even more unassuming.

[keyur8]

I like the idea of dedicated landing pages with those links.

That seems great for mobile.

So you would do the same on desktop as well, a top nav link that does not dropdown?

Thanks for the suggestions on the libraries.

[Atelierbram]

Yes dedicated landing pages can work out great on desktop too. The reasoning between favouring one over the other would be more content driven IMO. So when it’s an e-commerce webshop – with clear and well defined categories which would fit in those menu-items – a mega-menu could be the right solution, making it in a sense the first step of a customers filtering process. When the content of the website is more reading-focused, than it would make more sense in my mind to have those dedicated landing pages with the added benefit of summarising content and/or explanation.

There’s also this: for a long time there has been this myth on “one-click” links for the fastest path to a destination. But people don’t really mind clicking away a few times, as long as it’s a “happy click”, meaning taking them there: after arrival not many people will remember the number of clicks it took them getting there I think. But feel free to disagree ;)

[keyur8]

thanks for the detailed explanation!

i am developing for an ecommerce site, so the mega menus are probably still good for my scenario.

i did notice gap doesn’t have a mega menu. seems trends are changing.

[Author]

Posts