I have been doing some research on this site regarding whether a mega menu on a web site should activate/deactivate via hover or click.
I found a question with good answers regarding actuating the menu.
What I want to know is whether a menu that was opened via click should close via click, or whether the mouse leaving the mega menu area is more usable (i.e. click to activate, mouseout to de-activate)?
Mega menu contains a lot of information and user probably is under significant mental load while working with it. So if random mouseouts close the menu the task flow is broken and it's very annoying for user to re-start the work again.
So I think it's reasonable to close mega menus onclick as well as onclick at outside menu area. These actions reflect the user intention in more obvious way then just mouseout.
This question leads me to the rule: the more complex or important interaction is the more protected it should be, considering Murphy's law: "Anything that can go wrong, will go wrong".
I haven't been able to find sources for this, but my gut feel is that people expect complementary actions to mirror each other.
existing examples:
A menu opened with a click would probably be expected to close with a click too.
There are lots of issues with mouseout / hover (touch-screen users, keyboard only users etc) so clicking to open / close is a sensible way to negate many of these issues.
If you're concerned that clicking to close isn't as usable as mouse-out (possibly because it's not as obvious that you can click to close something in the same way that clicking to open something is) then you should add a 'Close' link into the menu item itself.
This aids not only the usability - as it makes it clearer how to close the menu - but also makes it a bit more accessible for keyboard users as they now have a way to close the menu without having to use the mouse or without forcing them to have to select a navigation menu option.
You don't even really have to restrict the close click to that link either, yes, clicking it should close the menu, but you can also hook the close into just a click outside the menu to trigger the same functionality.
download bmml source – Wireframes created with Balsamiq Mockups
In my opinion, it makes sense to have the menu open onclick and close onclick. Similar to a toggle or a light switch, it follows a simple rule of an action causing a reaction and the same action reversing it.
It's also conventional to close a dropdown menu or modal by clicking outside the active area. Since clicking is an intentional action, closing the mega menu even for an outside click seems logical.
Why not both? Of course if the user clicks outside the menu you should close it right away. If the user hovers outside the menu, however, this may or may not be "proof positive" that they were finished. The solution is to close immediately on click and close after a short delay on mouse out.
Obviously the timing of this delay is important. If the delay is too short, you still frustrate users who accidentally mouse out of the menu when making a selection. If the delay is too long, the site will feel slow and the interaction may confuse users. The size/complexity of your menu and specifics about your users will guide the delay time.
Just additional points to consider:
A particular desktop application I use has a menu that opens on click but closes on mouse out. While it does not have web-style mega menus, the menu and sub-menus can include upwards of 30 items. I cannot even count the times the menu closed after I navigated out accidentally by a few pixels - an especially annoying thing if you spend 8 second to navigate to a level 3 sub menu (with scroll etc). For this very reason menus on the Mac do not close on mouse out.
But, with mega menus the menu area is rather big and you should really ask yourself "What is the chance the user will accidentally hover out"?
Don't forget about accessibility issues as well. If the menu only opens on click, that means there isn't a top level link there. That then means that a user using a screen reader and/or keyboard only may have to traverse every mega menu to get to where they want to go which can be quite the burden in certain situations.
I'd strongly suggest:
Take a look at what target.com does with their mega menu.
As a savvy web user, I expect drop-down menus to only close whenever I hover outside of them; I don't expect them to require a mouse-click to close.
I know that opinions are frowned upon here, but the 'right' answer is whatever the majority of your users expect. I believe that most users would have the same expectations as me. You could also do a survey, informal or more serious, of stakeholders to get an idea to answer this question.
I know this is a closed question, but I thought I'd throw my two cents in.
I was really surprised to find my favorite implementation at the visa branding website (http://corporate.visa.com/newsroom/visa-logos-and-images.shtml)
The menus appear on mouseover and begin to fade on mouseout, but come back into full opacity if the user goes back into them before the animation has ended.
It's non-invasive, it looks nice, and there's little chance of you losing your spot. It can also be achieved with pure css in modern browsers.
