jQuery » SuckerFish Style

Purpose

Replicate Suckerfish Menus.

Original Code

$(document).ready(function(){
	$("#nav-one li").hover(
		function(){ $("ul", this).fadeIn("fast"); }, 
		function() { } 
	);
	if (document.all) {
		$("#nav-one li").hoverClass ("sfHover");
	}
});

$.fn.hoverClass = function(c) {
	return this.each(function(){
		$(this).hover( 
			function() { $(this).addClass(c);  },
			function() { $(this).removeClass(c); }
		);
	});
};	
/* 
Code Highlighting 
Courtesy of Dean Edwards star-light 
http://dean.edwards.name/my/behaviors/#star-light.htc
	- with jQuery methods added, of course
*/

Sample Markup

Sample 1 - One Level

• item 1
  • item 1.1
  • item 1.2
  • item 1.3
  • item 1.4
• item 2
  • item 2.1
  • item 2.2
• item 3
  • item 3.1
  • item 3.2
• item 4
  • item 4.1
  • item 4.2
  • item 4.3

These examples are here for your own learning. If you find yourself using part or all of them, give credit where appropriate. Enjoy!