Hover compatibility of dropdown menus on touch devices.

I’ve seen different attempts to make the dropdown menus work intuitively on touch devices and while some are trying to utilise the double tap (not the best as this triggers zoom) and various jquery contraptions, all you need is for the top level link to ignore the first tap and let the user see the dropdown.

This can be done by placing a bit of javascript into the onclick property of the anchor tag that prevents location change and self destructs so the link becomes clickable on the second interaction:

<a onclick="if ('ontouchstart' in document.documentElement){this.onclick=''; return false;}" href="/news/">News</a>

Leave a Comment