Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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 thats an 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

share|improve this question
3  
Apart from failing on mobile, show on hover is intrusive beyond believe. My mouse may only be traveling over the hover area on its way somewhere else. So if you do go with on hover, please, please, please, don't show it immediately, but delay it for an appropriate amount of time. –  Marjan Venema Aug 28 '13 at 13:48
1  
See this answer: ux.stackexchange.com/a/10119/19574 –  Charles Wesley Aug 28 '13 at 15:07
    
Also some good items on a different but related question: ux.stackexchange.com/questions/41481/… –  Charles Wesley Aug 28 '13 at 15:11
1  
And another related answer which is well referenced and strongly against hover. –  Izhaki Aug 28 '13 at 16:58
    
I really despise the 'show on hover' model. If I want to see a menu, I'll click! There are very good reasons why desktop applications have always used click instead of hover for displaying menus. One of the worst parts about web browsing is having tons of different UI elements pop up as I move my mouse, completely obscuring everything under them. –  17 of 26 Aug 28 '13 at 18:37

9 Answers 9

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.

share|improve this answer
    
the problem is coming up with a fool proof solution for that. –  Mervin Johnsingh Aug 28 '13 at 12:51
2  
@Mervin: that shouldn't be too difficult. Clicking can always work. The show on hover just pre-empts the click. If hovering showed the menu then a click on the menu caption could be ignored or simply re-executed. Just mind that delay! :) –  Marjan Venema Aug 28 '13 at 16:42

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).

share|improve this answer

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.

share|improve this answer

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

share|improve this answer

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

share|improve this answer

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.

share|improve this answer

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:

Why Hover Menus Do Users More Harm Than Good

share|improve this answer
    
Could you summarize some of the explanation in your answer? Link-only answers are discouraged. –  norabora May 31 at 4:18

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 trigerred on hover; especially where the interaction concerns multiple handles to be trigerred. 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 ;)

share|improve this answer

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 .

share|improve this answer
    
'Hover on the way out' because of mobile? I know some big still with 70%+ desktop traffic so that's a bit hard to believe. –  greenforest May 31 at 15:58
    
Indeed, however desktops are seeing more and more touch screens. –  uiEnvy May 31 at 16:42

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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