I'm using the standard Sitefinity navigation widget on my website. It's a fairly standard setup, several parent items, each with several child links in a drop-down that are revealed on hover. So far so good.
I've also set it up so that on smaller screens (i.e. mobile), it switches to the more touchscreen-friendly toggle menu, also a standard Sitefinity feature. So far so good.
The problem comes when accessing the website on larger touchscreen devices (i.e. tablets, some of which are just as wide as the desktop version of the site): hover doesn't work on touchscreens, so the drop-down menus are no longer accessible. Tapping the parent item just takes you to the parent page.
My question is, what is the appropriate method for dealing with this issue?
Maybe I gave too much info in the first post...so here it is simplified:
The standard hover-drop down menu provided by Sitefinity doesn't work on some tablets because the hover state does not exist with touchscreens. What is the recommended solution to this issue?
OK, I tried the code above.
It "worked", but not the way I need it to. The parent link in each drop-down is no longer clickable, and I need it to be.
I also would need it to recognize when the device is a touchscreen, regardless of screen size (Windows 8 laptops, larger tablets, etc).
Basically, all I need the menu to do is reliably convert the hover state to a click/tap for the parent link; first tap on the parent link brings up the drop-down, and the second tap on the parent link actually takes you to the parent page.