Standard navigation widget in Sitefinity doesn't support larger touchscreens?
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?
Additional info: For now, I set it up so that the toggle menu always shows if JavaScript detects the device being touch enabled. That makes the website useable, but introduces yet another issue on touchscreen devices that also have trackpads or mouse input (e.g. Windows 8 laptops and even some desktops); you get a massive toggle menu when a "desktop" menu would probably look/work better.
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?
Hello Jason,
In order to achieve you need you can try the following approach:
- Go to your Page/Page template (where the navigation widget is placed)
- Click Edit > Edit Selected Template (screenshot)
- Find and Set the variable whetherToOpenOnClick to false (var whetherToOpenOnClick = false;)
This should open the drop-down on hover but click should open the page.
Usually this setting is set to true for mobile devices where no hover.
In case you want to have both options depending on the device used, you have two options:
1) Add the following code in the template:
var whetherToOpenOnClick = false;var onMobile = kendo.support.mobileOS; if(onMobile) whetherToOpenOnClick = true;Thanks, I will look into this and see if I can get it working.
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.
Hello Jason,
Along with the option to add second menu for the different devices with the behaviour you need, you can create the parent page as Group page, in that way you will fix the issue on both types of devices.
Regards,
Svetoslav Manchev
Telerik