Mobile Friendly Dropdowns with DoubleTapToGo.js

Quick Story…

A while back, a client called in and said “Every time I click on your Services tab, the menu pops up, but before I can click on a link, it takes me straight to the services page.”

This surprised me, since I wasn’t seeing that on the iPhone but after checking it on a co-worker’s android phone, I confirmed that this was indeed a problem.

The website was still usable because the Services page has links to the individual services, but it was still a bug that needed to be fixed.

Dropdown Navs on iPhones

iPhones handle traditional drop-down menus in a simple, intuitive manner. The first touch opens the drop-down, while a second touch goes to the link.

This seems so logical that you might assume that all smartphones act the same way.

Android Dropdown Issues

However, traditional drop-down menus don’t work well on Android phones. If you click a drop-down link, it will open the drop-down AND go to the link at the same time. This is frustrating for anyone trying to click a drop-down, because they get sent to another page before they can click the sub-link.

A Simple Solution

To fix this problem Osvaldas Valutis wrote a javascript called DoubleTagToGo.js causes dropdown menus to behave the same way as mentioned above.

Putting It All Inline

You could link to the code in a separate file, but I recommend putting the entire code directly in the headcode of your website. This ensures everything will load, and won’t add any significant weight to your page (because the code is only a few lines long).

Use This Code

Copy the code below and paste it in the headcode of your website.

<script>
/*	DoubleTagToGo.js By Osvaldas Valutis, www.osvaldas.info
	Available for use under the MIT License */
;(function(e,t,n,r){e.fn.doubleTapToGo=function(r){if(!("ontouchstart"in t)&&!navigator.msMaxTouchPoints&&!navigator.userAgent.toLowerCase().match(/windows phone os 7/i))return false;this.each(function(){var t=false;e(this).on("click",function(n){var r=e(this);if(r[0]!=t[0]){n.preventDefault();t=r}});e(n).on("click touchstart MSPointerDown",function(n){var r=true,i=e(n.target).parents();for(var s=0;s<i.length;s++)if(i[s]==t[0])r=false;if(r)t=false})});return this}})(jQuery,window,document);
</script>
<script>
jQuery(document).ready(function( $ ) {
	$( '#menu li:has(ul)' ).doubleTapToGo();
});
</script>

Change the Classes

Looking For An Exciting Fantasy Adventure?

Meet your newest fandom.

If you just paste the code, it probably won’t work, because the website’s navigation will have it’s own class or ID.

Here’s what you need to do…

Near the end of the code you’ll see  $( ‘#menu li:has(ul)’ ).doubleTapToGo();

Inspect your website’s navigation.  Find the <nav> tag.  If it says <nav class=”top-menu”> change the code to say $( ‘.top-menu li:has(ul)’ ).doubleTapToGo();