This is my first tutorial and the subject is rollover image tabs using only CSS. This is the method i use for my sites navigation here.

There will be a few steps covered but i will try to explain it as simple as i can

Step 1 – The Image

First we need to open Photoshop or the graphics program of your choice and create an image 110px x 80px. This is to be the only image we will use for our navigation. Notice how I have both of the buttons (normal state & hover state) in the one image.

Step 2 – The XHTML

Now its time to fire up your coding program, In my case it is Dreamweaver. Create a new html document and name it navbar.html then save the file.

Now add right after the body tag the following code:

<div id="navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>

Step 3 – The CSS

Create a new css file and add the following

#navigation li {
	display: block;
	list-style-type: none;
	float: left;
}
li a:link, li a:active, li a:visited {
	background-image: url(YOURIMAGE);
	background-repeat: no-repeat;
	height: 40px;
	width: 110px;
	line-height: 40px;
	background-position: left top;
	margin-right: 2px;
	display: block;
	text-align: center;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-decoration: none;
}
li a:hover {
	background-image: url(YOURIMAGE);
	background-repeat: no-repeat;
	height: 40px;
	width: 110px;
	line-height: 40px;
	background-position: left -40px;
	margin-right: 2px;
	display: block;
	text-align: center;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-decoration: none;
}

And that is it you are done You should have ended up with this Click me

Explanation

This takes away all of the strain and bloaty code of javascript and also preloads the image so you do not get that nasty flicker effect.

Because the image loaded initially is the double button image the rollover is instant in its rolled on state. The hover state called upon in the li tag basically tells the bg to rise 40px on rollover.

I hope that I have helped you with your CSS Tabbed Navigation woes. If you feel something would be better another way then please do let me know

Tags: CSS, CSS & Xhtml, design, Float, List, Menu, Navigation Menu

This entry was posted on Sunday, May 20th, 2007 at 7:43 pm and is filed under Design, CSS & Xhtml. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.