Dave McCourt thinks some thoughts...

Here is a nice little solution to make drop down menus work well for both desktop and mobile. In particular for iPad landscape view, when desktop-sized menus often still fit and work OK. I had a problem with links in dropdowns requiring double-taps to fire and it wasn’t clear to users that this is what they needed to do. A single click would do nothing except produce confusion.

The HTML:

<nav role="navigation" id="mainmenu">
  <h3 class="visuallyhidden">Main menu</h3>
  <ul id="menu-main">
    <li class="menu-item-has-children"><a href="/news/">News</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="http://www.google.com/">Google</a></li>
        <li class="menu-item"><a href="http://www.bbc.co.uk/">BBC</a></li>
        <li class="menu-item"><a href="http://www.apple.com/">Apple</a></li>
      </ul>
    </li>
  </ul>
</nav>

This sets up the drop down. The

clickHandler

code checks what type of event is used and if it is a

touch start

event redirects immediately. The jQuery:

// This binds the mouseover and mouseout events to the top level menu items
$('.mainmenu > li').bind('mouseover', openSubMenu);
$('.mainmenu > li').bind('mouseout', closeSubMenu);

// This checks what type of click event we are dealing with (mouseclick or touch)
var clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click");

// This function opens the submenus
function openSubMenu() {
  $(this).find('ul.sub-menu').css('visibility', 'visible');
  // This binds a function to the submenu links, to check what click event was used 
  $("ul.sub-menu li a").bind(clickHandler, function(e) {
    // If it is a touch event redirect the link immediately
    if (clickHandler == "touchstart") {
      window.location.href = this;
    }
  });
};

// This function closes the submenus
function closeSubMenu() {
  $(this).find('ul.sub-menu').css('visibility', 'hidden');
};