Part of the CSS Navigation Reading List

can be used to enhance many features of a site, including menu bar navigation. This example shows how a simple primary navigation bar, built with HTML5, can be enhanced and animated in a way that gracefully degrades for older browsers.

First, the markup, which is very simple: as the <nav> element should only be used once on a page, we don’t even need to add an id: 

<nav>
	<a href="#">Home</a>
	<a href="#">About Us</a>
	<a href="#">Products</a>
</nav>

We’ll add a and a few other basic CSS properties to the navigation bar. It is important to remember that while our background images can be any size, we should always crop them to the size that is actually going to be used; otherwise we are loading a giant image and only using a fraction of it. We’ll also add a small shadow to the link text to distinguish it from the background image. 

nav {
	background: url(clouds.jpg) no-repeat;
	padding: 1em 0; 
}
nav a { 
	text-decoration: none;
	color: #fff;
	padding: 1em;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);
}

We’ll also add a hover state to the links, which brings in semi-transparent background: 

nav a:hover {
	background: rgba(0, 0, 0, 0.7);
}

Next, we’ll add an animation component to the default link state, to fade it in over time: 

nav a {
	text-decoration: none;
	color: #fff;
	padding: 1em;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);
	transition: background 1s;
}

You may notice a small gap between the background blocks of adjacent links. This is the same problem encountered in the very first horizontal navigational bar, and solved in the same way: removing the carriage returns from the between the links: 

<nav>
	<a href="#">Home</a><a href="#">About Us</a><a href="#">Products</a>
</nav>

The result: if the browser understands CSS animation, the background fades in and out behind each link on hover. If the browser does not understand CSS animation, the visitor will still see a link background. As always, CSS is appearance, HTML is the markup of data, and the two remain separate.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.