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.

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.

Comments
  • Kenneth
    Posted at 3:55 pm November 2, 2016
    Kenneth
    Reply
    Author

    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?

    • Kenneth
      Posted at 5:50 pm November 2, 2016
      Kenneth
      Reply
      Author

      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.

      • Tom Daly
        Posted at 9:02 pm November 28, 2016
        Tom Daly
        Reply
        Author

        glad to know this still works! thanks for trying it out.

  • Jenny
    Posted at 5:22 pm October 20, 2014
    Jenny
    Reply
    Author

    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

    • Justin
      Posted at 9:31 am January 4, 2016
      Justin
      Reply
      Author

      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.

  • martin
    Posted at 6:53 pm June 30, 2014
    martin
    Reply
    Author

    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?

  • Kat
    Posted at 11:16 am June 26, 2013
    Kat
    Reply
    Author

    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!

  • billy
    Posted at 5:29 pm August 13, 2012
    billy
    Reply
    Author

    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.

  • billy
    Posted at 5:05 pm August 9, 2012
    billy
    Reply
    Author

    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.

    • Thomas Daly
      Posted at 3:09 pm August 13, 2012
      Thomas Daly
      Reply
      Author

      Any specific errors? Have you verified if your script is being called?

      • Addy
        Posted at 5:30 pm January 31, 2013
        Addy
        Reply
        Author

        i am trying to get this working, i could not make it work. i have customized navigation and already using superfish for dropdown animation.

        • Thomas Daly
          Posted at 11:55 am February 1, 2013
          Thomas Daly
          Reply
          Author

          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.

  • Leave a Reply