Keeping the navigation of your website as simple as possible is always a good idea, however sometimes you just have to use multi level navigation, and commonly a drop down menu is used. Recently we had to use a drop down menu for a clients responsive WordPress website – but quickly discovered the problem when navigating the site using an iPad or any touch screen device.
The problem
Without a cursor on a touch screen device you just don’t have a hover state, so no drop down menu appears. Tapping on the menu item might reveal the drop down menu for a split second – but then quickly disappears as your browser has just opened up the new page to the link you just pressed.
The answer
We found a tiny bit of jQuery called DoubleTapToGo.js which prevents the browser from opening a new URL but allows it if it’s tapped again in succession. If there is an intermediate tap between the first and second taps then a counter resets. So one tap and your drop down menu appears – just like on your desktop.
How to use with WordPress
Enqueue the script properly so it’s included when your theme loads, and add the following, replacing #navigation with the id of your themes navigation.
jQuery( function()
{
jQuery( '#navigation li:has(ul)' ).doubleTapToGo();
});
