Horizontal Navigation, a how to: XHTML, CSS, Sprite

July 15th, 2008 under code, tutorial

Let’s check out the sprite.

Using CSS Sprites are a great method to cut down on the number of HTTP requests for a page. Basicly a sprite is an image file that is made up of a collection of image. Let’s look at the sprite for our nav:

Breakdown of horizontal navigation sprite

Pretty straight forward huh? If not you can read more about CSS Sprites here:

Our friend CSS

To start out let’s set some styles for the body and the page holder div of our doc.

...
body{ 
  margin:0; padding:15px; 
  font: 11px Arial, Helvetica, sans-serif;
  color:#000;
  background:#333;
}
 
div#page {
 width: 800px; /* set the width so when the browser 
window is resized our page doesn't wrap */
}
...

Now let’s set up our unordered list:

...
ul#navHolder { 
  margin:0; padding:0; /* set to 0 to remove extra space around the ul */
  height: 28px; /* set to the height of the navigation so 
                         that it will maintain space on our page */
}
 
ul#navHolder li {
  margin:0 3px 0 0; /* set the right margin to space out the navigation a little bit */
  list-style:none; /* remove the bullets */
  float:left; /* set to left so the li's line up horizontal */
}
...

Next we need to setup the links:

...
ul#navHolder li a:link,
ul#navHolder li a:visited{ /* sets the visited state of the link as well */
 display:block;  /* set to block so the anchor width and height can be set */
 width:150px; height:26px; /* set to the demensions of our navigation */
...

Now when we set the sprite as the background of our links and position it top left it will only show the “mouseOut” state. While we’re at it why not set some styles for our navigation’s text:

...
  background:url(../img/hor.nav.bg.png) top left no-repeat;
  font-size:13px; line-height:26px; 
  text-decoration:none;
  text-align:center;
 /* optional styles */
  border:1px solid #000000; 
  text-transform:uppercase;
  color: #33CCFF;
 }
...

The next step is to setup the “mouseOver” or hover state of our navigation:

...
  ul#navHolder li a:hover { background-position:center left; color:#FFFFFF; }
 
  ul#navHolder li a:active { border-color:#FFFFFF; } /* optional style for click */
...

Our navigation is almost finished. The last step is to setup our navigation to change depending on which page is calling it. To do this I use our body tag and anchor tag ID’s:

...
body#home ul#navHolder li a.home, /* page home, anchor home */
body#page-1 ul#navHolder li a.page-1, /* page page-1, anchor page-1 */
body#page-2 ul#navHolder li a.page-2 { /* page page-2, anchor page-2 */
  background-position:bottom left; /* set background position to show activeState */
  /* optional styles */
  color:#FFFFFF; 
  font-weight:bold;
  cursor:default;
}
...

That’s it, we now have a horizontal navigation! You can down load the source files here.

Pages: 1 2

Tags: CSS, css sprites, how to, HTTP, navigation, project, template, tutorial, XHTML

This entry was posted on Tuesday, July 15th, 2008 at 8:46 am and is filed under code, tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

My Gallery at Zazzle

One Response to “Horizontal Navigation, a how to: XHTML, CSS, Sprite”

Webernot said on August 7th, 2008 at 9:07 pm
First off thank you. I was able to follow your tutorial to the letter with perfect results.
Would love to see a tutorial about setting up a good site development structure. Love the site keep up the great work!

JEL3