Mega menu on click, rather than hover « Support Forum | Kriesi.at

Support Forum » Abundance

Mega menu on click, rather than hover

7 posts from 3 voices

Started 9 months ago by Deaner666
Latest reply from Nick
This topic is not a support question

Tags:

Deaner666
Member

Hi there, just wondering if anyone can help with this query?

I want the dropdown menus / mega menus to open when a nav link is clicked, rather than on hover. Can someone point to where in the JS I need to do this? I've scanned through /abundance/framework/js/avia_mega_menu.js but can't see the event handler for this.

Cheers,

Dave

Posted 9 months ago #
Mya

Hi Dave,

I'm not sure either so let me tag the rest of the team to see if they know.

Regards,
Mya

Posted 9 months ago #

Deaner666
Member

Right. I've made some progress. The file to change is:

/abundance/js/avia.js

Dropdowns work great, I made a small change to the dropdown function starting at line 282:

// bind events for dropdown menu
dropdownItems.find('li').andSelf().each(function()
{
	var currentItem = $(this),
		sublist = currentItem.find('ul:first'),
		showList = false;

	if(sublist.length)
	{
		sublist.css({display:'block', opacity:0, visibility:'hidden'});
		var currentLink = currentItem.find('>a');

		currentLink.bind('mouseup', function() //currentLink.bind('mouseenter', function() <--CHANGED BY DAVE
		{
			sublist.stop().css({visibility:'visible'}).animate({opacity:1});
		});

		currentItem.bind('mouseleave', function()
		{
			sublist.stop().animate({opacity:0}, function()
			{
				sublist.css({visibility:'hidden'});
			});
		});

	}

});

So you click a nav link to get the dropdown menu and it automatically closes when you move the mouse away from it.

The mega menus I haven't sorted completely yet. I've changed the function starting on line 262 to the following:

//bind event for mega menu
megaItems.each(function(i){

	$(this).toggle( //$(this).hover( <--CHANGED BY DAVE

		function()
		{
			delayCheck[i] = true;
			setTimeout(function(){megaDivShow(i); },options.delay);
		},

		function()
		{
			delayCheck[i] = false;
			setTimeout(function(){megaDivHide(i); },options.delay);
		}
	);
});

Trouble is, using toggle, you have to click the nav link again to get rid of the menu, rather than it disappearing automatically. My jQuery skills aren't strong enough to quickly see how to rewrite this function to work the same as dropdowns. Any ideas?

Cheers,

Dave

Posted 9 months ago #

Deaner666
Member

Cool. I think I solved it. I did this:

//bind event for mega menu
megaItems.each(function(i){

	$(this).mouseup(

		function()
		{
			delayCheck[i] = true;
			setTimeout(function(){megaDivShow(i); },options.delay);
		}
	);

	$(this).mouseleave(
		function()
		{
			delayCheck[i] = false;
			setTimeout(function(){megaDivHide(i); },options.delay);
		}
	);
});

Seems to work.

Posted 9 months ago #

Deaner666
Member

Further tweak... I changed "options.delay" to "0" for the mouseup event on mega menus. It felt odd to have a slight delay after clicking the link before the mega menu faded into place. You can see the final product here:

http://www.amanotech.dreamhosters.com

(It's heavily customised, but it is Abundance, honest!)

Posted 9 months ago #
Deaner666
Member

OK, I want the moon on a stick now ;-)

For tablet / smartphone users, I need to be able to click outside the mega menus / dropdowns when they're open to make them go away ('cos there's no mouseleave event). Any ideas?

Posted 9 months ago #
Nick
Moderator

Hi,

Unfortunately t's not as simple as changing hover to click, since hover is still needed as well in the click menu to determine when to close the child menu.

Here is a link (http://stackoverflow.com/questions/7312414/superfish-jquery-menu-open-on-click-rather-than-hover) of the process of changing a (not this one) mega menu from hover to click. You can compare the code to see that the end result is fairly different and looks very labor intensive.

Of course you can always pay a few dollars to buy a ready made menu which does what you want in 20 different ways. Here is two cool ones for $15 and $4 that have clicks, sliders and rattles, and there are many more: (http://codecanyon.net/item/ubermenu-wordpress-mega-menu-plugin/154703) (http://codecanyon.net/item/mega-menu-complete-set/152825)

Thanks,

Nick

Posted 9 months ago #