Terrific CSS3 Navigation Image Rollover
This CSS-based tutorial by
web designer and developer Joren Rapini (http://jorenrapini.com/)
teaches us how to create a terrific navigation image rollover. It is uses very
minimal HTML and CSS codes. Check out this demo: http://jorenrapini.com/posts/css-rollovers/navigation.png.
The first thing to do is
to create a navigation image menu on photoshop. Then, we’ll be writing the HTML
and CSS. And that’s it!
<ul id="navigation">
<li><a href="index.php"
class="link1">Home</a></li>
<li><a href="metal"
class="link2">Metal</a></li>
<li><a href="plastic"
class="link3">Plastic</a></li>
<li><a href="services.php"
class="link4">Services</a></li>
<li><a href="news.php"
class="link5">News</a></li>
<li><a href="catalog.php"
class="link6">Catalog</a></li>
<li><a href="about.php" class="link7">About
Us</a></li>
<li><a href="contact.php"
class="link8">Contact</a></li>
<li><a href="users.php"
class="link9">Registered Users</a></li>
</ul>
CSS
#navigation {
border-right:1px solid #999;
padding:10px 0px;
width:145px;
}
#navigation a {
display:block;
background:url(navigation.png);
height:47px;
text-indent:-9000px;
}
#navigation a.link1:hover {background-position:-146px 0px;}
#navigation a.link2 {background-position:0px -47px;}
#navigation a.link2:hover {background-position:-146px -47px;}
#navigation a.link3 {background-position:0px -94px;}
#navigation a.link3:hover{background-position:-146px -94px;}
#navigation a.link4 {background-position:0px -141px;}
#navigation a.link4:hover {background-position:-146px -141px;}
#navigation a.link5 {background-position:0px -188px;}
#navigation a.link5:hover {background-position:-146px -188px;}
#navigation a.link6 {background-position:0px -235px;}
#navigation a.link6:hover {background-position:-146px -235px;}
#navigation a.link7 {background-position:0px -282px;}
#navigation a.link7:hover {background-position:-146px -282px;}
#navigation a.link8 {background-position:0px -329px;}
#navigation a.link8:hover {background-position:-146px -329px;}
#navigation a.link9 {background-position:0px -375px; height:65px;}
#navigation a.link9:hover {background-position:-146px -375px;}
If you want to learn more of jQuery and CSS3 with lot's of good stuff tutorials you can go here on Web Design tutorials
No comments:
Post a Comment