WordPress drop down menus for tablets

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();

Click here to read the full article by Osvaldas Valutis.

Published on in Coding.

Sign up to email alerts when I publish new posts.

I will never spam you, send you junk mail, sales emails or pass your email address to third party marketing entities.