User Centered Mega Menu

I have been involved in a debate involving the opening of the mega menu onClick versus hover. There are different variables that need to be addressed when doing each one. I have been trying to find some valid and arguable language. From my investigation it seems the majority of websites are using a hover mega menu.Does this also work onClick for mobile? Any comments? Advice? Thanks.

I think two main considerations are: (a) if you’re using hover instead of click, how is that going to work on touch screens, and (b) if you’reusing JavaScript for your menu how is that going to work on devices that have JS disabled or just not available.

Thanks Gandalf but why do you always have to be cryptic when I just want to get the ring :slight_smile: I am trying to understand what method is preferred on desktop? I understand that on a mobile device it functions with click events. I have not seen where click events are used on desktop but how is the hover function still functional with keyboard navigation? Is it still Section 508 compliant?

1 Like

Sorry if I was cryptic @SunnaH it wasn’t my intention, but answers are seldom yes or no! :slight_smile: If you ask 2 web designers the best way to do something you’ll get 3 different answers! :wink: I may be wrong but I don’t think hover itself is against s.508 but if you use JavaScript it may make the menu inaccessible to users with assistive technology.

1 Like

hover for desktop, and replicate hover functionality with javascript and onTap for mobile (adding a class that replicates :hover state )

It’s harder to give a general answer for keyboard only input. It really depends on how big the nested menu is, and if JavaScript is available or not. It’s best to make a progressive version that handles all situations and takes into account “keyboard only + JavaScript” & “keyboard only without JavaScript”.

The optimal solution would be that the full menu is keyboard accessible on every page, but without JavaScript this can’t always be the case, and a multiple page option can be an option as well.

Let’s say you have a huge menu, and every submenu would be overlapping the other (hidden) ones.
You can still make this keyboard accessible (without JavaScript) if you create a solution over multiple pages.
Only make the menu items keyboard accessible that can be shown without JavaScript and with only :focus. The keyboard user can enter on these top level menu items and land on a page where the submenu items of the chosen top level item are keyboard accessible as well.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.