Most navigation menus that feature dropdown menus, do so on hover…

Here’s some code you can use to make mobile friendly drop-down menus for 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>

At the end where it says ‘#menu li:has()’ change #menu to match whatever class you have on your navigation.

I’ll write a more detailed tutorial on this later…

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *