Pattern for hover menus

[SteveALee]

Hover menus cause a menu to pop up when the pointer hovers over a collapsed item or disappears when the pointer is moved away. By definition these work only in browser contexts with pointers and not touch - eg desktop and not mobile.

The alternative is click menus where a click is required to open & close a menu or sub menu.

This article covers important UX issues with hover menus.

I think you should should stop building hover menus too. I’m here to tell you why.

It would appear the are some important Cognitive accessibility issues here. Several of our patterns indirectly touch on the problems with hover menus:

• Use a Familiar Hierarchy and Design
• Make the Site Hierarchy Easy to Understand and Navigate
• Ensure Controls and Content Do Not Move Unexpectedly
• Clearly Identify Controls and Their Use
• Use a Familiar Hierarchy and Design

But perhaps there should be a new pattern, an new user story or perhaps a new persona?

Personal observations

@SteveALee : hover menu behaviour is confusing and usually end up making them vanish when I want them to appear.

@djkalbert : hover menus cause confusion about where I am or where I previously was within the menus

[djkalbert]

I also have some issues with menus closing by itself whether it's hover menu or click menu. There are 2 cases to this:

1. Once you click and open the sub menus underneath a main menu, if you move the cursor outside the boundary, then the sub-menus sometimes closes
2. Once you click and open the sub menus underneath a main menu, if you move the cursor and click other menu to see the sub menu underneath, then the previously opened sub menu would automatically close.

Overall, in both of these cases, I am not able to click and see multiple menus at the same time.

This can be problematic if there are many sub menus underneath one menu and there are multiple menus to navigate because it is hard to remember which sub menus were underneath which one and I'd have to click each one of them to find out. Especially, when my ADHD symptoms are more vivid, I keep forgetting where the submenus were before so I often find myself going back and forth clicking the menus multiple times to be able to remember and navigate.

My suggestion is to make menus to be click menus but enable multiple menus to be clicked and stay opened at the same time to give users a choice if they want to be able to see submenus across different menus in one sight to be able to better navigate and have less cognitive strain to remember the sitemap.

[anevins12]

I support the idea of having multiple submenus open at the same time, however that may not work when there is limited space for those menus. Often, submenus are implemented using CSS absolute positioning giving risk to submenus overlapping one another. A reason that submenus only open one at a time may have been to prevent this overlapping scenario where content and functionality would be obscured.