Suckerfish DHTML dropdown menu with JQuery

DHTML dropdown menu’s have been greatly improved in terms of accessibility, standards compliance, and weight using the Suckerfish technique of building pure CSS-based menus and then attaching a small javascript that allows Internet Explorer 6 to mimic the CSS hover method. Once the die-hards hanging onto IE6 let go, we won’t have to worry much about this anymore, but for now it looks like it’s going to linger for a bit.

I’ve been using JQuery for a bit now for all of my DOM manipulation and have found great savings in the amount of JavaScript code I have to write and the ease in which it can be employed in a CSS based site.

While this is generally the last piece to get IE working with your menu’s, here’s the JQuery code to replace the suckerfish Javascript, which is being used on this site now. If you’re familiar with suckerfish, the JQuery code should be readable enough to figure out what’s going on.

$(function() {
	if ($.browser.msie && parseInt($.browser.version)< 7) {
	    $("#tabs li").hover(
            function() {
            	$(this).addClass("sf");
            },
            function() {
		$(this).removeClass("sf");
            });
	}
});

The CSS code:

#tabs {
	background:transparent url(images/fade_grey_tab.gif) repeat-x scroll center bottom;
	margin:0;
	padding:0;
}
#tabs ul {
	display:block;
	position:absolute;
}
#tabs ul.children {
	margin:0;
	padding:0;
	border-top:1px solid #FCD290;
	z-index:100;
	visibility:hidden;
}
#tabs li {
	background:#969696 url(images/bg_grey_tab.gif) no-repeat scroll left top;
	display:inline;
	float:left;
	height:auto;
}
#tabs li li {
	background:#FFF0CE none repeat scroll 0%;
	display:block;
	float:none;
}
#tabs a {
	text-decoration:none;
	background:transparent url(images/bg_grey_tab.gif) no-repeat scroll left top;
	border-right:1px solid #A2A2A2;
	color:#FFFFFF;
	display:block;
	font-weight:bold;
	line-height:20px;
	text-align:center;
	width:115px;
}
#tabs a:hover, #tabs a.selected {
	background:#FCDA2E url(images/bg_orange_tab.gif) no-repeat scroll left top;
	color:#FFFFFF;
	text-decoration:none;
}
#tabs ul a {
	background:#FFF0CE none repeat scroll 0%;
	border-bottom:1px solid #FCD290;
	border-left:1px solid #FCD290;
	border-right:1px solid #FCD290;
	color:#666666;
	line-height:20px;
	width:115px;
}
#tabs ul ul a {
	background:#FFF9EA none repeat scroll 0%;
}
#tabs ul a:hover, #tabs ul a.selected {
	background:transparent url(images/bg_orange_tab.gif) no-repeat scroll left bottom;
}
#tabs li:hover ul, #tabs li.sf ul {
	visibility:visible;
}
#tabs li:hover ul ul, #tabs li.sf ul ul {
	visibility:hidden;
}
#tabs li:hover ul, #tabs li li:hover ul, #tabs li.sf ul, #tabs li li.sf ul {
	visibility:visible;
}

The markup, slimmed down version of my menu, only the necessities:

Binaries

Usenet


Blacklisted

Hosting


Blogging

Plug-ins
Tutorials
Upgrades

I’m putting this post out there for Javier, who reads my blog, but doesn’t understand a word of it, and the answer to that burning question is, no my wife won’t let me date that girl from work