Coding XHTML & CSS Sprite Navigation

Coding Sprite Navigation into functional XHTML & CSS. This is a second part to the earlier published Creating a Sprite Navigation Set in Ps, where the resource files are also available for download.

In another recently published tutorial labeled Icon Supported Navigation, some direction was given towards seeing Sprite Navigation being implimented and so here we are.

Part 1 – The Basic Mark-up

0. template.html
1. <div id="wwwNav">
2.   <ul id="Nav">
3.     <li id="nav00"><a href="#">home</a></li>
4.     <li id="nav01"><a href="#">about</a></li>
5.     <li id="nav02"><a href="#">services</a></li>
6.     <li id="nav03"><a href="#">work</a></li>
7.     <li id="nav04"><a href="#">blog</a></li>
8.     <li id="nav05"><a href="#">contact</a></li>
9.   </ul>
10. </div>

Now that we have our main mark-up assigned for our navigation, we can get down to coding the CSS for it.

Part 2 – Beginning CSS

0. style.css
1. #wwwNav { width:950px; height:35px; margin:25px 0;}
2. #wwwNav #Nav { width:950px; height:35px; margin:0; padding:0; background:url(‘sprite-nav.jpg’) 0 0 no-repeat; }
3. #wwwNav #Nav li { display:inline; }
4. #wwwNav #Nav li a { float:left; outline:none; width:125px; height:0; padding-top:35px; overflow:hidden; }
5. #wwwNav #Nav li a { background-image:url(‘sprite-nav.jpg’); background-repeat:no-repeat; }

The important part I find within the above CSS – besides the entire setup of the navigation – is the ‘outline’ declaration. By applying the outline declaration and setting it to none, you will not get the dotted outline around menu items which often annoyingly includes positioning, margin and padding space.

Now that we have the above written, we can move swiftly on to create the alterative states of the navigation by simply editing the background position of the graphic we have already assigned.

Part 3 – CSS a

0. style.css (continued)
1. #wwwNav #Nav li#nav00 a { background-position: 0 0; }
2. #wwwNav #Nav li#nav01 a { background-position: -125px 0; }
3. #wwwNav #Nav li#nav02 a { background-position: -250px 0; }
4. #wwwNav #Nav li#nav03 a { background-position: -375px 0; }
5. #wwwNav #Nav li#nav04 a { background-position: -500px 0; }
6. #wwwNav #Nav li#nav05 a { background-position: -625px 0; }

What we have done above is to create a seperate instance for each menu item by altering the position of the background. As our Sprite Navigation graphic is a horizontal bar, we only have to manipulate the x-axis with the width of each item which in this case is 125 pixels.

Part 4 – CSS a:hover

As we now move down the Sprite Navigation graphic, we alter the value in the y-axis by the height of each menu item, which in this case by 35 pixels.

0. style.css (continued)
1. #wwwNav #Nav li#nav00 a:hover { background-position: 0 -35px; }
2. #wwwNav #Nav li#nav01 a:hover { background-position: -125px -35px; }
3. #wwwNav #Nav li#nav02 a:hover { background-position: -250px -35px; }
4. #wwwNav #Nav li#nav03 a:hover { background-position: -375px -35px; }
5. #wwwNav #Nav li#nav04 a:hover { background-position: -500px -35px; }
6. #wwwNav #Nav li#nav05 a:hover { background-position: -625px -35px; }

Part 5 – CSS a:active

Again we continue down our Sprite so alter the background position by double the height; 70 pixels.

0. style.css (continued)
1. #wwwNav #Nav li#nav00 a:active { background-position: 0 -70px; }
2. #wwwNav #Nav li#nav01 a:active { background-position: -125px -70px; }
3. #wwwNav #Nav li#nav02 a:active { background-position: -250px -70px; }
4. #wwwNav #Nav li#nav03 a:active { background-position: -375px -70px; }
5. #wwwNav #Nav li#nav04 a:active { background-position: -500px -70px; }
6. #wwwNav #Nav li#nav05 a:active { background-position: -625px -70px; }

Part 6 – CSS Current State

Finally, if like me you apply an id attribute to the body tag, you will be able to use the following CSS for a current state declaration. There are other alternatives to coding the current state but I now find this my own prefered route.

0. style.css (continued)
1. body#home #Nav li#nav00 a { background-position: 0 -105px; }
2. body#about #Nav li#nav01 a { background-position: -125px -105px; }
3. body#services #Nav li#nav02 a { background-position: -250px -105px; }
4. body#work #Nav li#nav03 a { background-position: -375px -105px; }
5. body#blog #Nav li#nav04 a { background-position: -500px -105px; }
6. body#contact #Nav li#nav05 a { background-position: -625px -105px; }

Thank you for reading & I hope you got something out of this!

Alex | Zen Elements