Creating a Sprite Navigation Bar
Video tutorial coming soon
Video tutorial coming soon
The NavBar PSD[attachment=125]
The HTML
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)
Code:
#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; }