http://www.kriesi.at/support/tags/mega-menus Support Forum - Tag: mega menus - Recent Posts en-US Tue, 18 Jun 2013 07:54:43 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/correct-position-of-mega-menus#post-116850 Fri, 07 Jun 2013 05:40:36 +0000 Dude 116850@http://www.kriesi.at/support/ <p>Yes but this is a technical limitation. Kriesi uses javascript to calculate the position and when the browser loads the website it doesn't execute all javascript functions immediately but it must load the js files first and then executes the code. During this time the browser may not know the right menu position and it will just float it to the right. </p> http://www.kriesi.at/support/topic/correct-position-of-mega-menus#post-116556 Thu, 06 Jun 2013 06:55:24 +0000 ganjou 116556@http://www.kriesi.at/support/ <p>It is right that during loading the page on IE the mega menu goes right and after comes back to the center. </p> http://www.kriesi.at/support/topic/correct-position-of-mega-menus#post-116555 Thu, 06 Jun 2013 06:52:54 +0000 ganjou 116555@http://www.kriesi.at/support/ <p>Well I met this problem using a cache plugin after minifying CSS and JS files... </p> http://www.kriesi.at/support/topic/correct-position-of-mega-menus#post-114426 Tue, 28 May 2013 11:56:21 +0000 Devin 114426@http://www.kriesi.at/support/ <p>Hi Nicolas,</p> <p>What version of Abundance are you using? The mega menu position should be correct in all browsers by default so there could be a plugin conflicting with the position or something else going on.</p> <p>If we can take a look at your live site, we can inspect things live and see whats going on.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/correct-position-of-mega-menus#post-114228 Mon, 27 May 2013 18:02:57 +0000 abw 114228@http://www.kriesi.at/support/ <p>Hi,</p> <p>It seems to me that the calculation of the position of the megas menus is not correct.</p> <p>avias.js, line 220 :</p> <p><code>else if(pos.left + megaDiv.width() &gt; parentContainerWidth)<br /> {<br /> megaDiv.css({left: (megaDiv.width() - pos.left) * -1 });<br /> }</code><br /> must be<br /> <code>else if(pos.left + megaDiv.width() &gt; parentContainerWidth)<br /> {<br /> megaDiv.css({left: parentContainerWidth - megaDiv.width() - pos.left });<br /> }</code><br /> else the mega menu can be outside the parent container.</p> <p>With the change<br /> <img src="http://imageshack.us/a/img801/5416/withb.jpg"></p> <p>Without the change<br /> <img src="http://imageshack.us/a/img23/2357/withouth.jpg"></p> <p>With Chrome and Internet Explorer left position (pos.left) are false.<br /> Example : Firefox, pos.left : 130 px, Chrome, pos.left : 139 px, so position of mega menus are wrong.</p> <p>Anyone know why these browsers do not give me the right values​​?</p> <p>Nicolas. </p> 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> http://www.kriesi.at/support/topic/using-buttons-in-mega-menus#post-57232 Wed, 23 May 2012 16:14:37 +0000 Devin 57232@http://www.kriesi.at/support/ <p>Hi snowtone,</p> <p>As far as I know the mega menu text boxes do not support shortcode. You could try copying the html the shortcode creates and pasting that into the box. </p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/using-buttons-in-mega-menus#post-56555 Fri, 18 May 2012 13:54:20 +0000 snowtone 56555@http://www.kriesi.at/support/ <p>Any ideas? </p> http://www.kriesi.at/support/topic/using-buttons-in-mega-menus#post-56440 Thu, 17 May 2012 17:07:52 +0000 snowtone 56440@http://www.kriesi.at/support/ <p>I'm having a spot of trouble adding buttons to mega menus. I am placing the button shortcode in the Description field of a Custom Link menu item with the "Use the description to create a Text Block" checkbox ticked.</p> <p>The button shrinks down and the styling is removed. Is there a better way to accomplish this? </p>