Create a super fast website navigation with a single image and CSS
This tutorial will show you how create a navigation for your website using CSS and a single image so there’s no loading times for the rollover states, resulting in smoother transitions.
The trick to creating a seamless rollover is to have both the normal and hover (Rollover) states in a single image and then use CSS to move the image accordingly.
HTML Code: (This goes between your <body> </body> tags)
<div id=”navigation”>
<ul>
<li class=”navhome”><a href=”#” mce_href=”#”>Homepage</a></li>
<li class=”navhosting”><a href=”#” mce_href=”#”>Hosting Packages</a></li>
<li class=”navcontact”><a href=”#” mce_href=”#”>Contact Us</a></li>
</ul>
</div>
Stylesheet Code:
#navigation ul {
width: 333px;
height: 27px;
background: url(navigation.gif) no-repeat 0 0;
list-style: none;
padding: 0;
margin: 0 auto;
}
#navigation li { display: inline; }
#navigation li a:link, #navigation li a:visited {
display: block;
text-indent: -7000px;
outline: none;
height: 27px;
width: 100px;
float: left;
}
#navigation li.navhome a:hover {
background: url(navigation.gif) no-repeat 0 -27px;
}
#navigation li.navhosting a:hover {
background: url(navigation.gif) no-repeat -100px -27px;
}
#navigation li.navcontact a:hover {
background: url(navigation.gif) no-repeat -200px -27px;
}
And that’s it!
Be sure to add the CSS code either within the <head> tag of your website or within a separate stylesheet.
Don’t worry if you are having troubles with this tutorial, you can download all the files associated with it below. If you look in the code of the html you will see everything commented to help you understand how it works and also help you modify it for your own website.
Download this tutorial:
http://www.heartinternet.co.uk/blog/HI_Tutorial_Navigation.zip
Tags: , css, navigration, Web Design