Creating a Sprite Navigation Bar

[OliverE]

Creating a Sprite Navigation Bar
Video tutorial coming soon

​

The NavBar PSD[attachment=125]

The HTML

<ul id="navigation">
  <li id="nav-home"><a href="#"><span>Home</span></a></li>
  <li id="nav-about"><a href="#"><span>About</span></a></li>
  <li id="nav-gallery"><a href="#"><span>Gallery</span></a></li>
  <li id="nav-contact"><a href="#"><span>Contact</span></a></li>
</ul>

The CSS (coded for the PSD included)

#navigation { margin:0; padding:0; width:378px; height:44px; background-image:url(navigation-background.gif); }

#navigation li { margin:0; padding:0; list-style-type:none; display:inline; height:44px; text-align:center; float:left; line-height:40px; }

#navigation a { display:block; height:44px; }
#navigation a:hover { background-image:url(navigation-background.gif); }

#nav-home {width:95px; }
#nav-home a:hover { background-position:0px bottom; }

#nav-about { width:94px; }
#nav-about a:hover { background-position:-95px bottom ; }

#nav-gallery { width:93px; }
#nav-gallery a:hover { background-position:-189px bottom ; }

#nav-contact { width:96px; }
#nav-contact a:hover { background-position:-282px bottom; }

#navigation span { display:none; }

 

[Factor8™]

I always wanted to know how to make one. Thanks!

 

[OliverE]

Video tutorial coming soon.
Ill be going through everything from making the navbar to editing the CSS

This method of creating a rollover nav bar is much more search engine friendly as it doesnt add alot of junk code to the HTML. Its all CSS based which means search engines can have a much easier time crawling your site.