Are you Insane?

I recently implemented this jQuery effect from ShopDev into my own blog navigation. I, because I’m such a genius , actually improved it so that when Javascript is turned off, it reverts back to less interesting CSS hover. So here’s the jQuery for the main navigation

jQuery("#nav li a").wrapInner("<span></span>");
jQuery("#nav li").removeClass("hover");
jQuery("#nav li a span").css("opacity","0");
jQuery("#nav li a span").hover(
	function() {
		jQuery(this).stop().animate({ opacity: 1 }, "fast")},
	function() {
		jQuery(this).stop().animate({ opacity: 0 }, "fast");
	});

The span tags are needed because you are essentially overlaying a hover state on top of a non-hover state. If Javascript is turned off, then the hover state won’t be visible.

The class “hover” needs to be removed because well… roll CSS

.hover #nav_home:hover, #nav li.active #nav_home, #nav_home span {
background-position:0 -57px;
}

Because in order to for the css hover state to work, it has to find the class “hover”, which I coded in the <li> tags. No “hover” class, no CSS hover state when Javascript is on. Notice the styling for the span tag is there too. You’ll need that.

The rest is explained in ShopDev’s tutorial. My contribution is to tweak the code a little bit to make it more usable for non-Javascript users.