Superfish v1.4.1 by Joel Birch

An enhanced Suckerfish-style menu plugin for jQuery. Now jQuery 1.2 ready!

Download:

Download the Superfish plugin. Also download the css file used for the example menu on this page (or the other examples depending on the type of menu you require). NEW! A massively commented version of this css file is now available! You may add to and alter this css file to make the menu suit your design, but leave the css rules that do not affect the general appearance as these are the rules that allow for both graceful degradation (when JavaScript is unavailable) and progressive enhancement (the enhancements Superfish adds when JavaScript is available).

What is it?

Superfish is a jQuery plugin (tested to work perfectly with all versions of jQuery from v1.1.2 all the way to the current v1.2.2) that takes an existing pure CSS dropdown menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements:

How do you use it?

Simply begin with a working pure CSS dropdown menu just like you would if creating a Suckerfish menu. The default class to use in your CSS to go with your :hover rules (as you would for IE with regular Suckerfish) is "sfHover". Then call Superfish on the containing ul element. eg:

$(document).ready(function(){
	$("ul.nav").superfish();
});

You can customise various aspects of the menu by passing in an object containing your settings. This example demonstrates this but uses the default settings (pointless in practice):

$(document).ready(function(){
	$("ul.nav").superfish({
		hoverClass	: "sfHover",
		pathClass	: "overideThisToUse",
		delay		: 800,
		animation	: {opacity:"show"},
		speed		: "normal",
		oldJquery	: false, /* set to true if using jQuery version below 1.2 */
		disableHI	: false, /* set to true to disable hoverIntent detection */
		onInit		: function(){},
		onBeforeShow	: function(){},
		onShow		: function(){},
		onHide		: function(){}
	});
});

Example:

The following example supplies a custom animation object to fade in and slide down the sub menus. It also uses code to fix the IE6 z-index bug related to select elements by adding the bgiframe plugin to the sub menus when needed.

$(document).ready(function(){
	$("ul.nav")
	.superfish({
		animation : { opacity:"show", height:"show" }
	})
	.find(">li:has(ul)")
		.mouseover(function(){
			$("ul", this).bgIframe({opacity:false});
		})
		.find("a")
			.focus(function(){
				$("ul", $(".nav>li:has(ul)")).bgIframe({opacity:false});
			});
});

Please note that if you do not intend to use the bgiframe plugin then you should write this code far more simply as shown here:

$(document).ready(function(){
	$("ul.nav").superfish({
		animation : { opacity:"show", height:"show" }
	});
});

Here are some select elements to demonstrate that the menus get around the Internet Explorer z-index bug by using the bgiframe plugin. In IE6, the sub menus should appear above the select elements as expected.

Other menu examples:

Superfish can of course be used with other menu styles such as these ones:

Tested on:

Superfish supports the same browsers that jQuery does:

Troubleshooting:

If you are having cross-browser issues with the CSS for your menu, the demo css file may provided you with clues as it works in all supported browsers. Other things to bare in mind are:

If you need to ask questions or need help with Superfish, post them (with a link to an example of your menu) to the jQuery Google Group with the word Superfish somewhere in the subject and I will respond ASAP – often within minutes, occasionally within days depending on my workload.

Further details:

The plugin is issued under the same dual license as jQuery, so basically you can use it as you wish (an author’s credit would give me a warm fuzzy glow). Also, if you have any feedback/suggestions or find any bugs you can post to the jQuery general mailing list which I keep a close eye on – all feedback is greatly appreciated. Special thanks to Brian Cherne and Brandon Aaron for their plugins that play so nicely with mine.