Emenu, a jQuery plugin
January 30th, 2009 in scripts | 12 Comments
I suppose since I’ve given up MooTools, I’d get more familiar with jQuery, which I’ve used primarily for work. And what better way to do that than to port one of my Mootools plugins to jQuery! You can find it in the jQuery plugin repository.
I made it more flexible than the original because now you can use whatever effect you want. There are four custom events that I’ve added, and here are the defaults:
$('#containerId').emenu({
over: function(event, bg){
bg.stop().fadeTo(400, 0.5);
},
out: function(event, bg){
bg.stop().fadeTo(400, 1);
},
show: function(event, ul, li, width, height){
ul.css('visibility', 'visible').stop(true).fadeTo(200, 1);
},
hide: function(event, ul, li){
ul.stop(true).fadeTo(200, 0, function(){
ul.css('visibility', 'hidden');
});
}
});
There are three ways to add your own. You can overwrite them like above by passing in your own or you can do $.fn.emenu.defaults.[event] = function(){...}. Plus since they are custom events attached to the container, you can also do $("#containerId").bind('emenu.[event]', function(){...}). Keep in mind this won’t overwrite the defaults unless you unbind them first.
The custom events receive a few arguments worth explaining.The events over and out receive the div element that contains non-menu-related content; show and hide receive the item menu moused over/out and its submenu. Additionally, show receives the height of the menu and the width of the submenu if you’ve used auto-calculation.
There’s a demo and additional options listed on the plugin page.
I think I’ll be working on converting my other scripts to jQuery as well so keep an eye out for them!
Hi, I'm Chris, a passionate freelance web developer. My languages of choice are PHP and JavaScript, and that's what you'll mostly find in my blog. You'll also find updates about 
