This is a continuation of the previous post Pure CSS Dropdown Menus. jQuery is used only for creating neat effects when menus are rolled over.

Example CSS Menus with jQuery Effects

Download Files (4Kb)

There are some caveats, this code will most likely not work in IE6. It will however work in most modern browsers including IE7. The best idea is to download the code and see how it works.

This uses the now standard UL and LI tags for building menus, with anchor tags for links.

Here’s the CSS it has changed slightly from the older version, we’ve eliminated the :hover as we’re using jQuery for open and close effects.


.nav {
	width: 100%;
	height: 40px;
	background-color: #999;
	display: block;
}
.bigmenu {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.bigmenu li.firstlevel {
	margin: 0px;
	padding: 0px;
	float: left;
	position: relative;
	width: auto;
	margin-right: 1px;
}
.bigmenu li.firstlevel a {
	display: block;
	height: 20px;
	padding: 10px;
	background-color: #555;
	color: white;
	text-decoration: none;
}
.bigmenu li.firstlevel ul li a {
	display: block;
	height: auto;
	padding: 5px;
	background-color: #555;
	clear: both;
}
.bigmenu li.firstlevel ul li a:hover {
	background-color: #777;
}
.bigmenu ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.bigmenu li.firstlevel ul {
	position: absolute;
	display: none;
	top: 40px;
	left: 0px;
	min-width: 200px;
	background-color: #555;
}

And here’s the jQuery code.

$(document).ready(function(){
	$(".firstlevel").mouseenter(function(){
		$(this).find("ul").stop(true,true).fadeIn(200);
	});
	$(".firstlevel").mouseleave(function(){
		$(this).find("ul").stop(true,true).fadeOut(200);
	});
});

It’s very simple, when the mouse enters, we fade in, when it leaves, we fade out. The ‘stop(true,true)’ tells jQuery to clear all current transitions, otherwise you’ll end up with multiple effects one after each other, instead of jQuery running the effect from where it should have.

It’s a very small amount of code, and does a great little transition effect when opening menus, this is the beauty of jQuery, you need very little code to do some effects that, while they’re not in-your-face, they are subtle effects that add a little magic and sparkle to your site which adds to the user-experience, rather than detracting from it.

Example CSS Menus with jQuery Effects

Download Files (4Kb)