I'm wondering how you would get around a cursor jump when coming out of a hover state on a menu.

Here's an example of what I mean.

See how when you come out of a hover on item one is skips you to item 3 since item two has no sub items? How would you avoid this? Can you translate the cursor to land in the second item when hovering off of item one?

  • 1
    @Izhaki Well I'm asking this as a UX problem. Is it bad the the user is being skipped over a menu item because of the hover state? I can look up the syntax to fix the problem Im just not sure what the solution should be. Or if I should have hover states at all. – kroberrtsonn Sep 21 '15 at 22:02
  • 1
    Simple solution is to not have an accordion menu. The menu pattern is downright poor UX. There are several other patterns that would fix the issue and provide a more workable flow. – Evil Closet Monkey Sep 21 '15 at 22:07
  • 1
    @EvilClosetMonkey what other patterns would you suggest? – kroberrtsonn Sep 21 '15 at 22:09
  • Also, the accordion menu itself is not terrible for the use on the page, the issue is with the jump coming off of the hover state. This is acting as a side menu bar for a dashboard type page. The flow of having an expandable menu works for our current needs we're just not sure when to trigger the expanding state. – kroberrtsonn Sep 21 '15 at 22:12

Perhaps a couple of things you could consider if you really must have the accordion (although they'll have some side effects):

Add a 'delay' to the accordion

You'd need the mouse hovered over the item for (say) a quarter of a second for it to expand. The beauty of this trick is that when the first accordion list collapses, another accordion list that the mouse may be hovered over won't be immediately opened.

You'll have to fine tune the delay duration as if it is too long, users may not notice it or get annoyed if they have to use it a lot and it takes too long.

Change it to be toggled by mouse clicks.

Lots of ways this could be done so it all depends on the use case. One quite common way is to click accordion 'button' to expand and click again to collapse. If try to open two (or more) you could have it automatically close the previously opened accordion list or allow multiple accordion lists to be opened at once and let the user collapse and expand as they please.

On another note

Visually each element looks the same – so users would not be able to tell if it is a accordion or not at a glance.

| improve this answer | |
  • Thanks for this response. I really like the delay idea, hopefully that will fix our issues. We're not too worried about the item looking expandable since the content of the link will make that pretty obvious. Also once the link is active is when viewing the links should be most important to the user so that menu item will be expanded if it is active. I never realized that there was such a strong aversion to accordion menus. – kroberrtsonn Sep 22 '15 at 14:03

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