Create an Advanced CSS3 Menu – Version 2

Create an Advanced CSS3 Menu – Version 2

March 9, 2011 Freebies, Tutorials

A while ago, I wrote a tutorial on how to create an advanced CSS3 menu. This tutorial is still being linked and used by many people, so I thought I would revisit it and release an even better version. This update brings a lot of improvements including code, customization, user experience and is even more scalable than before.

What’s new

  • Totally reworked code allows you to use no images, but still obtain the gradient effect with ease.
  • Improved user experience
  • Improved webkit (Safari, Chrome) support
  • Interactive states including hover, focus and click

Improved user experience

The old menu limited the user to only be able to click on the menu where the text was. The new menu allows the user to click on the entire button to be taken to the link. Also, the new menu now features four states: normal, hover, focus and click. Focus is where the user would use tab to select the menu link. The browser default outline was removed with CSS, so this feature was added for users who depend on that state. The fourth state is the click state, which happens when, you guessed it, the user clicks on it. This is a subtle effect, but it adds just enough to intrigue your user.

How it’s done

Everything is done with CSS, so there are no images needed. Below is the CSS for the buttons.


.cbdb-menu li a {
	/* This generators the gradient on top of the solid color */
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, rgba(255,255,255,.5)),
		color-stop(1, rgba(0,0,0,.1))
	);
	background-image: -moz-linear-gradient(
		center top,
		rgba(255,255,255,.5) 0%,
		rgba(0,0,0,.1) 100%
	);
	color: #f4f4f4; /* IE */
	color: rgba(255, 255, 255, 0.8);
	display: block;
	font: bold 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif;
	outline:none;
	padding: 5px 15px;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
}
	.cbdb-menu li a:active {
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0,rgba(255,255,255,.5)),
			color-stop(.1,rgba(255,255,255,.2)),
			color-stop(.85, rgba(0,0,0,.2)),
			color-stop(100, rgba(0,0,0,.4))
		);
		background-image: -moz-linear-gradient(
			center bottom,
			rgba(255,255,255,.5) 0%,
			rgba(255,255,255,.2) 10%,
			rgba(0,0,0,.2) 85%,
			rgba(0,0,0,.4) 100%
		);
	}

This CSS is for the basic button, without any color. This applies the gradient to the button, using RGBA colors. RGBA allows the developer to set the color, as well as transparency (the A). The white and black in the gradient all has a transparency to it, allowing the solid color below to show through.

In this demo, color is added to the buttons with classes to demonstrate the flexibility. The colors are added using basic hex code to the link:


.red {
	background: #B80202;
	border: #B80202 1px solid
}
	.red:hover, .red:focus{
		background-color:#e30606
	}

Because the basic styling for the button is a transparent gradient, and it is applied using the background-image property, the solid color can be shown underneath the gradient. Think of it as a two layered button, with the transparent gradient being on the top, with the solid color below.

Get Creative

Please, use this on your own projects – and get creative with it. Since the menu is styled entirely using CSS, it is very flexible and open to any customization. If you use it on your site or in one of your projects, drop a link in the comments below so we can all see it in action.

Comments