Wednesday, June 3, 2009

SitePoint Mega Menus: my incarnation

Got a great approach to menus from the SitePoint MegaMenu post.

ugh, I wanted to share some code, but looks like code tags are verboten here. I really need to make myself a decent blog.

sigh.

Well, the javascript shows up, sans whitespace indenting, so here you go: (of course you also need the hoverIntent plugin for jquery -- read the article!)

function addMega(){

   $($(this).find("h2")).addClass("hover");
   $($(this).find("div.menu-div")).slideDown("50"); 
   $(this).addClass("hovering");
}

function removeMega(){

   $($(this).find("h2")).removeClass("hover");   
   $($(this).find("div.menu-div")).slideUp("fast");
   $(this).removeClass("hovering");
}

var megaConfig = {    
interval: 200,
sensitivity: 4,
over: addMega,
timeout: 500,
out: removeMega
};

$("li.mega-menu").hoverIntent(megaConfig);

// need this jquery plugin for IE6 to solve Z-index issues.
$(".menu-div").bgiframe();

I can verify that it works great in FireFox, Safari 3 and even IE6.

No comments:

Post a Comment