View Issue Details

IDProjectCategoryView StatusLast Update
0019858phpList 3 applicationTheme - Trevelinpublic13-06-19 10:44
Reportersamtuke 
PrioritynormalSeverityminorReproducibilityhave not tried
Status pausedResolutionopen 
PlatformLinuxOSFedoraOS Version26
Product Version3.4.1 
Target Version3.4.4Fixed in Version 
Summary0019858: Research: Make navigation sub-menus expand on hover for desktop users only
DescriptionFeedback was received that the navigation menu of Trevelin is less convenient than Dressprow as it requires more clicks to access submenus. To reduce the clicks required to find the desired menu, try expanding the sub-menus when the cursor hovers over the parent menu item, but only if a desktop (not mobile or tablet) is being used. For touch-screen devices, this hover effect would not work well. Consider the time delay of the menu pop-out carefully. Instant menu expansion on hover is unlikey to result in good user experience.
TagsNo tags attached.

Activities

brunilda

06-05-19 08:49

manager   ~0062173

Each list items of topmenu in sidebar section gets a class called 'open' when the menu item is clicked.
The :hover selector should be used with this class in order to open the menu items or add a function to make active the 'open' class only when mouse is hover.

samtuke

06-05-19 12:41

administrator   ~0062175

@brunilda Simply using :hover to determine the flyout behaviour of the submenus isn't good for usability as the mouse can easily move I precisely and cause the wrong menus to flyout at high speed. Eg the criticisms (but not the solution) of this article: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

Using a CSS transition time may be enough to avoid these issues, eg by slowing down the flyout speed to avoid the click, while at the same time avoiding too fast / confusing instant hover flyouts. See here for one example: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

Please also consult with @rudolf on the best UX approach to take here.

brunilda

07-06-19 14:42

manager   ~0062328

@rudolf
What would you recommend for a good menu UX?

@samtuke I think that "hover intent" concept using CSS transition delay time would be convenient for this case.
Eg. https://codepen.io/jhogue/pen/payuj

samtuke

07-06-19 16:16

administrator   ~0062329

This is @Rudolf s territory

rudolf

12-06-19 14:16

administrator   ~0062379

Last edited: 13-06-19 10:44

View 2 revisions

@samtuke @brunilda, What I suggest is, one hover state which will have a certain delay, and on click, which after you click the menu, the page reloads to the new path with the sub menu expanded. See pictures attached for reference.



Hover.jpg (47,041 bytes)
Hover.jpg (47,041 bytes)
On click.jpg (43,235 bytes)
On click.jpg (43,235 bytes)