http://www.kriesi.at/support/topic/mega-menu-on-click-rather-than-hover Support Forum - Topic: Mega menu on click, rather than hover en-US Sat, 18 May 2013 23:07:36 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/mega-menu-on-click-rather-than-hover#post-72180 Tue, 21 Aug 2012 21:37:47 +0000 Nick 72180@http://www.kriesi.at/support/ <p>Hi,</p> <p>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.</p> <p>Here is a link (<a href="http://stackoverflow.com/questions/7312414/superfish-jquery-menu-open-on-click-rather-than-hover" rel="nofollow">http://stackoverflow.com/questions/7312414/superfish-jquery-menu-open-on-click-rather-than-hover</a>) 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.</p> <p>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: (<a href="http://codecanyon.net/item/ubermenu-wordpress-mega-menu-plugin/154703" rel="nofollow">http://codecanyon.net/item/ubermenu-wordpress-mega-menu-plugin/154703</a>) (<a href="http://codecanyon.net/item/mega-menu-complete-set/152825" rel="nofollow">http://codecanyon.net/item/mega-menu-complete-set/152825</a>) </p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/mega-menu-on-click-rather-than-hover#post-72178 Tue, 21 Aug 2012 21:26:53 +0000 Deaner666 72178@http://www.kriesi.at/support/ <p>OK, I want the moon on a stick now ;-)</p> <p>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? </p> http://www.kriesi.at/support/topic/mega-menu-on-click-rather-than-hover#post-72175 Tue, 21 Aug 2012 21:14:11 +0000 Deaner666 72175@http://www.kriesi.at/support/ <p>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:</p> <p><a href="http://www.amanotech.dreamhosters.com" rel="nofollow">http://www.amanotech.dreamhosters.com</a></p> <p>(It's heavily customised, but it is Abundance, honest!) </p> http://www.kriesi.at/support/topic/mega-menu-on-click-rather-than-hover#post-72171 Tue, 21 Aug 2012 21:08:00 +0000 Deaner666 72171@http://www.kriesi.at/support/ <p>Cool. I think I solved it. I did this:</p> <pre><code>//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); } ); });</code></pre> <p>Seems to work. </p> http://www.kriesi.at/support/topic/mega-menu-on-click-rather-than-hover#post-72169 Tue, 21 Aug 2012 20:54:12 +0000 Deaner666 72169@http://www.kriesi.at/support/ <p>Right. I've made some progress. The file to change is:</p> <p>/abundance/js/avia.js</p> <p>Dropdowns work great, I made a small change to the dropdown function starting at line 282:</p> <pre><code>// bind events for dropdown menu dropdownItems.find(&#39;li&#39;).andSelf().each(function() { var currentItem = $(this), sublist = currentItem.find(&#39;ul:first&#39;), showList = false; if(sublist.length) { sublist.css({display:&#39;block&#39;, opacity:0, visibility:&#39;hidden&#39;}); var currentLink = currentItem.find(&#39;&gt;a&#39;); currentLink.bind(&#39;mouseup&#39;, function() //currentLink.bind(&#39;mouseenter&#39;, function() &lt;--CHANGED BY DAVE { sublist.stop().css({visibility:&#39;visible&#39;}).animate({opacity:1}); }); currentItem.bind(&#39;mouseleave&#39;, function() { sublist.stop().animate({opacity:0}, function() { sublist.css({visibility:&#39;hidden&#39;}); }); }); } });</code></pre> <p>So you click a nav link to get the dropdown menu and it automatically closes when you move the mouse away from it.</p> <p>The mega menus I haven't sorted completely yet. I've changed the function starting on line 262 to the following:</p> <pre><code>//bind event for mega menu megaItems.each(function(i){ $(this).toggle( //$(this).hover( &lt;--CHANGED BY DAVE function() { delayCheck[i] = true; setTimeout(function(){megaDivShow(i); },options.delay); }, function() { delayCheck[i] = false; setTimeout(function(){megaDivHide(i); },options.delay); } ); });</code></pre> <p>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?</p> <p>Cheers,</p> <p>Dave </p> http://www.kriesi.at/support/topic/mega-menu-on-click-rather-than-hover#post-72163 Tue, 21 Aug 2012 20:39:14 +0000 Mya 72163@http://www.kriesi.at/support/ <p>Hi Dave,</p> <p>I'm not sure either so let me tag the rest of the team to see if they know.</p> <p>Regards,<br /> Mya </p> http://www.kriesi.at/support/topic/mega-menu-on-click-rather-than-hover#post-72159 Tue, 21 Aug 2012 20:25:58 +0000 Deaner666 72159@http://www.kriesi.at/support/ <p>Hi there, just wondering if anyone can help with this query?</p> <p>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.</p> <p>Cheers,</p> <p>Dave </p>