OOTB Navigation fix to support IPad & I-Devices

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.