I was recently asked to get the navigation to work on a tablet. Well part of the problem is the there is really no such thing as a Hover on those devices. Once you touch the screen it’s considered a click.
After browsing around the internet I found this article http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/ which contains somewhat of a fix for navigation menus. It basically explained to me that I can attach to a ‘touchstart’ and ‘touchend’ event. Expanding on that idea, I created a small jQuery snippet which works for the SharePoint OOTB navigation which will allow the user to use the navigation on their IPad, IPhone, or IPod. I will be working on support for other touchscreen devices in the near future.
Heres the code.. make sure you have the base jQuery library on your page.
$(document).ready(function() { if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) { $(".s4-tn .menu-horizontal ul.root li.dynamic-children a.dynamic-children").bind('touchstart', function(e) { var position = $(this).next().position(); if (eval(position.left < -1)) { $(this).click(function(c) { c.preventDefault(); }); } else { var location = $(this).attr("href"); window.location = location; } }); } });
This will allow you to touch once to open a menu item that has children. Touching that menu item again would navigate to that node.
This has worked pretty well for me. If you decide to try it out let me know if you encounter any issues.
Hi Tom,
Thanks for the solution above it truly is helpful. It gets me so much closer to where I need to be. I am having an issue after I click a node in the drop down. When I get to the next page the navigation stops working to show the dropdown items and just clicks me through to the next page.
Thoughts?
Hi Tom I was able to fix this issue by placing the JavaScript in the top of the page prior to any other script loading and that resolved the issue.
Thanks again for providing such a complete solution.
glad to know this still works! thanks for trying it out.
Hi
This was working well on devices up to and including iOS7 however on iOS8 devices it doesn’t seem to work. Any ideas?
Thanks,
Jenny
I noticed on iOS8+ that sharepoint 2010 renders a completely different source code for the OOTB navigation. It’s no longer a set of list items, but instead a bunch of span tags. The original classes applied to the navigation elements are also missing.
Hello Thomas,
thanks for the code snipped. It works great.
The only thing is the whole Branch opens if there are 3 submenu levels including all menus of the 3rd level.
Any idea how to solve it?
Thanks! The hover works for me, however, since my top level navigation is also a link, it is difficult to bring down the menu without “fat fingering” it.
Also, if the wrong menu item is pressed and you press the back button to navigate back to the top level site with navigation, the menu is still open and will not go away until the page is refreshed.
This is a great jumping off point for a personalized solution… thanks so much!
no errors it just doesn’t stop the link from processing.
how can i verify if the script is being called? i am new to jquery.
I wish i could get this to work but I feel like i am missing something. i have it in a js file that’s called from my master page which already has references to jquery files that work.
Any specific errors? Have you verified if your script is being called?
i am trying to get this working, i could not make it work. i have customized navigation and already using superfish for dropdown animation.
Sorry to hear you can’t get it working. If you’ve customized the navigation it won’t work as I have it posted. This is only for the OOTB navigation. This specific selector would only be hit by the OOTB navigation -> $(“.s4-tn .menu-horizontal ul.root li.dynamic-children a.dynamic-children”)
The idea would be the same to make it work for any other navigation, but you would have to find a new selector that works with your custom navigation.