On Click or On Hover for mega menu in responsive design?

Question

I am working on designing a responsive site which will have a mega menu for almost all the menu items. The initial consensus was to show the mega menu on hover but the challenge is that that the option fails when the site is viewed on a mobile device.

• The alternate option is to require the user to click on the top level menu item to show the mega menu when viewed on a mobile device and on hover on a desktop device but the challenge would be that we would need to detect via code whether the user is accessing from a desktop or a mobile. While this can be done via user agents its not a foolproof approach.

• Another option is to show the mega menu on click for all devices (desktop or mobile) but I am not sure if that's a universally accepted option for desktops.

Hence the question is whether the mega menu should be shown on click or on hover and what is the generally accepted standard considering this site is going to be responsive

Answer 1

Cannot it be both ?

Before clicking one has to hover, so lets make it hover-enough on every screen and clickable for when it is necessary.

Answer 2

You shouldn't try to identify is the device is mobile or not. You should be trying to to identify if the screen is a touch screen or not (*). (You could do this using Zurb Foundation 4.)

(*) Even on desktop touch screens hovering is an issue if the user isn't currently using the mouse (is touching the screen).

Answer 3

If mega menus are displayed on hover, one challenge is to distinguish between two different user intentions:

1. The user is just moving the mouse towards a target on the screen, and the mouse trajectory intersects the link corresponding to the mega menu.

2. The user actually looks at the navigation categories and needs more information about them.

The second situation should trigger the mega menu, but the first should not.

With the help of javacript code, we can track minimum time for mouse cursor to be stationary over mega menu link.

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

In this article, writer suggests to wait 0.5 seconds to detect mouse movement as well as user intention, I think it creates unnecessary delay.

We can see numbers of sites using mega menu on hover. As UX designers, our responsibility is to get rid of bad practices we learned.

Let's NOT show content in HOVER until we are 100% sure of user's intentions.

Answer 4

Maybe you can do a multilevel push menu which contains e.g. 5 items. When a user clicks an item, open another menu and so on.

Here is an example, but in your case the menu would appear from the top.

On iOS a tap is considered a hover but on Android a tap is a click so I wouldn't make it a hover menu for mobile.

Answer 5

Click. Hover menus are slow and hard to navigate because of hover tunnels, auto-closing when your mouse rolls off the menu area and hidden index pages.

This article explains:

The Hover Myth

Many designers believe that when their menus open on hover, they’re faster and easier to use. It might seem this way at first, but when you look deeper you’ll notice that the opposite is true. Menus that open on hover save users a click, but that click is necessary in letting the website know that the user wants to open a menu.

One of the worse things about hover menus is that they force users to move their mouse through hover tunnels. Hover tunnels are passages that users have to move their mouse through to click an item. Older users who are less tech-savvy will often have trouble doing this. Even tech-savvy users can find it annoying that they have to move their mouse in a confined path.

Why Hover Menus Do Users More Harm Than Good

Answer 6

You should stick to the hover menu on the desktop version of your website. You could use JavaScript to detect a touch device or use a JavaScript library such as Modernizr. This way you will be able to remove the hover from the menu and set it to a click event for touch devices.

You can do this aswell, just with CSS media queries with max device width. Although this is less foolproof as above option since you won't be able to do this for widths that are the same as used on desktop screens (1024px for example). You can't yet detect a "touch device" with CSS on all of the popular devices. See this questions & answer

Answer 7

I would suggest to keep both effect, HOVER and CLICK, because for CLICK, first you HOVER link.

So, ideally keep your mega menu top link with CLICK event. And by means of Javascript or Jquery, simulate HOVER effect on link as follows:

JQuery:

$('a.mega_menu_top_link').hover(function(){
            $(this).trigger("click");
});

In this way devices which supports hover event, mega menu will opens and for mobile devices it will fallback to click

Answer 8

While I support using Modernizr or media queries, my one concern with these solutions is that they don't address the fact that you're going to be displaying a 'mega-menu' on a mobile device - regardless of touch or hover, you need to make sure that the menu is actually usable once it's open. You might want to consider adapting your navigation for smaller devices.

Just a quick search brought up this: http://themes.pixelworkshop.fr/?theme=UniversalMegaMenu which is an adaptive mega menu library. I've never used this nor am I endorsing it in any way, but I do suggest digging around and finding a solution that works.

Answer 9

First things first make sure it is workable on a mobile device. Opening a mega menu on an iPhone or other smartphone might seem confusing and busy to the user. If you do find that using a mega menu is the direction you go, please make this on touch for mobile devices.

As far as hovering; I think that is something that is on its way out. With the mobile world taking more and more of the marketshare, touch screens are winning the race, hence, no hover .

Answer 10

As far as design patterns are concerned, I have always felt that saving primary interactions for on-click events and using peripheral ones for on hover lends a more solid feel to any piece of element anywhere on the software scene.

I may be wrong on this but I think things should happen on a piece of software only when a voluntary , informed piece of action triggers them; in this case, a solid click. On-hover events should always trigger introductory actions that let the user have a peek into what is going to happen if he/she click.

There can be cases made for primary interactions being triggered on hover; especially where the interaction concerns multiple handles to be triggered. e.g. when 5-6 different menu-heads exist, navigating between them using clicks may seem a tiny bit tedious. But still the previous agreement puts up a very good fight in this case as well and has tilted balance in it's favour for most web applications (the good old menu bar:)).

Keeping primary interactions on hover may have the upper hand while considering "dazzle my eyes and blow up my mind" options, but since we are talking about usability over afternoon tea, I guess unobtrusive design that allows you to do what you want without coming in your way is what has the final laugh.

So I would suggest, you should consider keeping the unrolling of the massive menu on click rather than on hover. That takes care of the mobile problem as well.

Clink to all the beautiful things in our life ;)