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
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();
1 Comment
Google is showing an error as:
“Uncaught ReferenceError: jQuery is not defined”
on this line:
jQuery(document).ready(function( $ ) {
Everything is working, just wondering if I should tweak anything though.