Standard navigation widget in Sitefinity doesn't support

Posted by Community Admin on 03-Aug-2018 20:47

Standard navigation widget in Sitefinity doesn't support larger touchscreens?

All Replies

Posted by Community Admin on 29-Apr-2015 00:00

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.

Posted by Community Admin on 30-Apr-2015 00:00

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?

Posted by Community Admin on 04-May-2015 00:00
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;

2) Add two navigation menus with different settings and hide/show one of them depending of the screen resolution using css media queries.

I hope this information helps.

Regards,
Svetoslav Manchev
Telerik
 
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
 
Posted by Community Admin on 07-May-2015 00:00
Thanks, I will look into this and see if I can get it working.
Posted by Community Admin on 19-May-2015 00:00

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.

Posted by Community Admin on 22-May-2015 00:00
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
 
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
 
This thread is closed