SharePoint 2013 Navigation and Mobile Devices

SharePoint 2010 and 2013 navigation unfortunately has never been designed as mobile- or touch-friendly. Top menu’s “mouse hover” effect provides serious interaction challenges when your submenus also happened to be URLs as well (catalog-based publishing sites for example). There has been a number of solutions posted to solve this issue for SP2010 sites, in particular a popular post OOTB Navigation fix to support IPad & I-Devices. However, with the user interface changes in SP2013 those solutions stopped working.

Below is a JavaScript snippet that solves the navigation troubles in SP2013, by allowing users click once to expand the submenu, and clicking it again to navigate to the underlying URL.
Insert this code at the end of the masterpage, or add it in $(document).ready() event handler:

if (navigator.userAgent.indexOf('Mobi') >= 0) {
    $('ul.root li.dynamic-children a.dynamic-children').bind('touchstart', function(e) {
        var isHoveredSubmenu = $(this).parent().hasClass('hover');
        if (!isHoveredSubmenu) {
            $(this).click(function(c) { c.preventDefault(); });
        } else {
            var location = $(this).attr('href');
            window.location = location;
        }
    });
}

A few notes about the code:
– The code only runs on mobile devices, the check for which is simplified and based on this recommendation: MDN: Mobile, Tablet or Desktop. Essentially the code searches for ‘Mobi’ string in the user agent string. This way it includes all Chrome, Safari and Opera browsers for all iOS and Android devices.
– Selector is much shorter and applies to all ‘a’ elements that have children based on ‘dynamic-children’ class presence.
– The rationale behind detecting if submenu is displayed or not, is based on the fact that when the submenu is displayed its class name is appended with ‘hover’. So we simply need to see if that class name is present in the element.