1

I'm working on a library website and we're leaning toward a megamenu.

In a recent meeting, we had a discussion about whether the megamenu should push the rest of the content down when it opens, like this library in Kansas, or if it should lay on top of the content like this library in South Carolina.

I know that one of those sites looks a bit nicer than the other one, so please put that aside. I'm only wondering if either behavior is better from a UX standpoint. I haven't been able to find any studies or data indicating one is better than the other.

The menu will open on click/touch, not hover.

  • Overlay. Whole page movement/jitter can cause confusion. From a performance standpoint, sliding the entire page downwards could be extremely CPU intensive and will produce a stuttering effect on lower-end PCs. The more DOM elements you have below the mega menu then the more stuttering/lag you can expect. – MonkeyZeus Dec 4 '14 at 21:25
  • @MonkeyZeus Good point on the potential performance problems. I hadn't even thought of that. – jimchristie Dec 5 '14 at 17:41
1

On desktop, if the mega menu activates on hover, then I would strongly suggest against sliding page content down and instead overlay the mega menu on top of page content. Shifting the entire page will likely cause a stutter or jitter on some displays.

However on tablet, I could see the desire for having the mega menus expand and the page slide down as menu panels will need a dedicated close button for touch users.

Here are some other good tips of mega menu usability from NN.

http://www.nngroup.com/articles/mega-menus-work-well/

  • The menu will open on click. I forgot to mention that in the first place. I've updated the question to include that. – jimchristie Dec 5 '14 at 17:37
0

Is there a reason the users may need to see the content while the menu is active? If not, I'd suggest sticking to an overlay (as opaque as possible so there is no chance of the content below making the menu unreadable)

This article has some good tips on mega menus and a little bit on overlays vs pushdowns: http://forumone.com/insights/mega-menu-best-practices/

In the above article it makes a good point that push down menus can become highly irritating if the height is even slightly different for each item. Making the content jump up and down all over the place.

You also have the issue of speed which is super important for user experience. We like things fast and clean. Generally anything too fancy gets annoying.

Hope this helps work out the best option for your project!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.