css-single-navigation.pdf

Loading ...
Global Do...
News & Politics
7
0
 
 
 
 
 
 
 
Create super fast navigation with a single image & CSS 
 
 
This tutorial will show you how create roll over 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; 
 
} 
 
You can download all these files here: http://www.hostgee.com/blog/HI_Tutorial_Navigation.zip 
 
 
 
Page 1