janikvonrotz
8/5/2013 - 5:57 AM

Touch Supported Navigation #JavaScript #WordPress

Touch Supported Navigation #JavaScript #WordPress

/* open dropdown navigation on touch devices */
jQuery('.touch nav').on('click','ul.nav>li:not(.active)',function(event){
  if(jQuery(this).find('ul').length > 0){
		event.preventDefault();
		jQuery('.overlay').show();
		jQuery(this).siblings().removeClass('active');
		jQuery(this).addClass('active');	
	}else{
		jQuery(this).siblings().removeClass('active');
		jQuery('.overlay').hide();
	}
});

/* open dropdown navigation on non touch devices */
jQuery('.no-touch nav').on('mouseenter','ul.nav>li:not(.active)',function(event){
	if(jQuery(this).find('ul').length > 0){
		event.preventDefault();
		jQuery('.overlay').show();
		jQuery(this).siblings().removeClass('active');
		jQuery(this).addClass('active');	
	}else{
		jQuery(this).siblings().removeClass('active');
		jQuery('.overlay').hide();
	}
});

/* close dropdown menu on click outside navigation */
jQuery('.overlay').on('click',function(event){
	jQuery('nav ul li').removeClass('active');
	jQuery('.overlay').hide();
});

/* button to show or hide menu on phone view */
jQuery('nav p.toggle-menu').on('click', function(event){
	jQuery('.phone nav>div>ul').toggleClass('hidden-phone');
});