View Issue Details
|ID||Project||Category||View Status||Date Submitted||Last Update|
|0019858||phpList 3 application||Theme - Trevelin||public||28-03-19 14:58||15-05-19 16:56|
|Priority||normal||Severity||minor||Reproducibility||have not tried|
|Target Version||3.4.3||Fixed in Version|
|Summary||0019858: Research: Make navigation sub-menus expand on hover for desktop users only|
|Description||Feedback 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.|
|Tags||No tags attached.|
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.
@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.