Hi would really like to add some easing to the megamenu is this possible? Thanks!

Comments

afountain’s picture

afountain commented

Ok I'm close! I have added this to my own js script.

var $ = jQuery

(function ($) {
	
    jQuery('li#megamenu-mlid-341').hoverIntent({
		
		over: function()
	{
		jQuery('ul.megamenu-slots-columnar').slideDown(1500, 'easeOutElastic');
	},
	 out: function () {
        $('ul.megamenu-slots-columnar').slideUp(1500, 'easeInElastic');
      },
	  timeout: 500
	});
	
})(jQuery);

I have also changed the megamenu.js hideOffset from -9000 to null.

It works great except for the very first time you hover over a menu. The first time you hover it just appears, the rest of the times the easing works as expected. Any thoughts?

afountain’s picture

afountain commented

Ugh.. A bug with what I have done so far. When the window is re-sized the menu slides down in an incorrect size. Help!

afountain’s picture

afountain commented

Ok... sorry for all the updates but here is another.

I added jQuery('ul.megamenu-slots-columnar').hide(); before the hoverIntent and changed the timeout in the new script to take longer than the timeout in the megamenu.js. This seems to have fixed the problem that the first time you hover it would just appear. Now the problem is it only slides down at a width of about 30px not showing the full menu. It does however show the full menu if you re-size the window as the animation is in progress? Any ideas? Thanks!

kevin p davison’s picture

kevin p davison commented

Following your progress, and please let us know if you come up with a solution. I'm trying to reproduce this easing-in example too: http://www.nfl.com/videos. (And we'll let you know if we figure it out ourselves, thanks.)

afountain’s picture

afountain commented

I gave up on it! Started making more problems then it was worth. Let me know if you get anywhere with it.