What’s the best solution for top level items on drop down menus for touch devices? On a desktop the drop down menu is revealed on hover on the top item. The top level item could be a link too, activated on the click event. But when this is used on a touch device the user would need to tap twice on the top level item to activate the link. So the solution for this would be to completely disable the top level link and just use the drop down for navigation links. This would work if the top level item wasn’t needed in the navigation, but if it is, the link title would need to be duplicated in the drop down. There doesn’t seem to be a perfect solution for this, has anyone found one?
For touch devices you should disable the hover effects (when they are integral to the usage ) as they don’t work consistently across devices. You would find that some devices will navigate straight away if the item is a llink and some need two taps etc ( and then you have the problem of closing the menu if nothing is selected from the dropdown).
I always use click menus for touch devices and it ensures there is no ambiguity.
For your problem I would make the text of the item navigate to destination as required but I would segment the button with a separate drop arrow to open the menu (I believe the bootstrap drop menus work like this).
For hover devices you can hide this function so they get a normal hover menu although I still prefer click menus for desktops as they are more accessible anyway.
I usually do a check with js to see if touch is supported and then add (or remove) a class from/to the HTML element so that you can do the hover styles for non touch devices. You can also add the click handler in the same way so that it only gets added if touch is supported.
Drop downs are difficult to do nicely even for simple menus and if they can be avoided altogether it’s usually for the best:)
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.