Take a course or start your CPD log

Share

Fading mega menus

Mega menus have been around for a while now - but it's still nice to see one that's been given a little TLC!

The new Stripe navigation almost swings into view when you first mouse over an element in the main navigation, with each drop down then fading into the next as you move your mouse along the menu. I can't do this justice in a quick gif so you'll have to visit, but the gif below does at least show you how they've laid things out in each element.

With a grey shaded area at the bottom of each drop down, they can separate out and draw attention to any key links or messages with nice little SVG icons for each main link.

Fading mega menus

A downside we've discovered is that the navigation doesn't seem to work if we disable JavaScript... the drop downs don't appear but more importantly the main items aren't clickable either. Yes, the majority of the world don't disable JavaScript but sometimes it can fail to load so we do tend to like naviagtion working without JS.

18a Editorial
by 18a Editorial

Would you like to give your digital knowledge a boost? Join our mailing list.