Darcy Clarke dev/ux/ixd/design

I’ve seen a lot of these posts before where someone has this awesome idea on how to make some sort of”glossy” or “slick” looking UI. Since I’m not one to fight with trends I happened to throw together a really quick, simple version of my own that may help a few people.

This version uses PE (Progressive Enhancement), or “gracefully degrades” for browsers without certain feature support. The browsers screenshots below should give you a sense of how the navigation will display and degrade in some cases.

Cross Browser:

The Base HTML:

To get started we build out an unordered list of links. Note that I embed a secondary list within each list item. This will be used as the “dropdown” and you could potentially use the same method to create multiple tiers of navigation.

<ul>
<li><a href="#">Nav Item</a>
	<ul>
		<li><a href="#">Sub Item</a></li>
		<li><a href="#">Sub Item</a></li>
		<li><a href="#">Sub Item</a></li>
		<li><a href="#">Sub Item</a></li>
	</ul>
</li>
<li><a href="#">Nav Item</a>
	<ul>
		<li><a href="#">Sub Item</a></li>
		<li><a href="#">Sub Item</a></li>
		<li><a href="#">Sub Item</a></li>
		<li><a href="#">Sub Item</a></li>
	</ul>
</li>
<li><a href="#">Nav Item</a>
	<ul>
		<li><a href="#">Sub Item</a></li>
		<li><a href="#">Sub Item</a></li>
		<li><a href="#">Sub Item</a></li>
		<li><a href="#">Sub Item</a></li>
	</ul>
</li>
</ul>

The Base CSS:

The base of this navigation will be meant to set up the structure. Initially we’ll set the style to a nice clean white/grey theme and then we can accentuate different color schemes by adding classes to the containing <ul> later.

/*	Container */
	ul
{	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: #ccc;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e9e9e9));
	background: -moz-linear-gradient(top, #fff, #e9e9e9);
	display: block;
	clear: left;
	float: left;
	padding: 0 15px;
	margin: 0 0 10px 0;
	-webkit-box-shadow: 0 0 2px #333;
	-moz-box-shadow: 0 0 2px #333;
	box-shadow: 0 0 2px #333;
	border: 1px solid #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; }

/*	Primary Nav Items */
	ul li
{	margin: 0;
	float: left;
	display: block;
	list-style: none; }

	/*	Primary Nav Items - Links*/
		ul li a
	{	padding: 10px;
		display: block;
		color: #666;
		text-decoration: none;
		text-shadow: 1px 1px 1px #fff; }

		ul li a:hover
	{	color: #000; }

		/*	Secondary Nav Container - Dropdown */
			ul li ul
		{	margin: 0 0 0 -15px;
			display: none;
			-webkit-border-top-left-radius: 0;
			-webkit-border-top-right-radius: 0;
			-moz-border-topleft-radius: 0;
			-moz-border-topright-radius: 0;
			border-top-left-radius: 0;
			border-top-right-radius: 0; }

			ul li:hover ul
		{	display: block;
			position: absolute; }

			/* 	Secondary Nav Items */
				ul li ul li
			{	clear: left; }

Adding Color:

You can add a class to the containing <ul> element that can be used to switch the color scheme of the navigation.

<ul class="red">

Adding class=”red” to the container, in the HTML, will now let me setup a new color scheme with my  CSS.

	.red, .red li ul
{	background: #e01111;
	background: -webkit-gradient(linear, left top, left bottom, from(#e01111), to(#901d1d));
	background: -moz-linear-gradient(top, #e01111, #901d1d);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e01111', endColorstr='#901d1d'); }

	.red a
{	color: #fff;
	text-shadow: 0 -1px 1px #770d0d; }

	.red a:hover
{	color: #fff; }

You can reuse this CSS and change the name of the class to make a multitude of different swatches. All with CSS3, no background images, no hard work.

Demo:

http://darcyclarke.me/dev/css3nav/

In the words of Red Green, “if the woman don’t find you handsome, they should at least find you handy”.

tags: color / css3 / design / html / nav / simple