Mega Dropdown menu seen on sitepoint.

Question

Im busy messing around with the mega menu example shown on sitepoint but noticed it uses a plugin to delay the hover. How do i adjust the Jquery so that i don't use the plugin. Sorry I can't figure it out my code so far

   $(document).ready(function() {

  function addsubmenu(){
    $(this).addClass("hovering");
 $(".hovering div").animate({"opacity": "toggle"}, { duration: "slow" });
    }

  function removesubmenu(){
    $(this).removeClass("hovering");
    }
});

but its not doing anything

Answer 1

You can't really avoid using HoverIntent here, since this is essentially the "spine" of the script functionality, the 'hover' behaviour is enabled by it.

If you want custom animations on the submenu items, you could do something like this:

$(document).ready(function() {
    function addsubmenu(){
        $(this).animate({"opacity": "toggle"}, { duration: "slow" });
    }
    function removesubmenu(){
        $(this).animate({"opacity": "toggle"}, { duration: "fast" });
    }
});

Answer 2

Try this:

http://www.geektantra.com/2009/09/jquery-mega-menu/

Its simple fast and easy to configure