Create a rollover navigation with just css

Demo Navigation

Above is a demo of what you will be making from this tutorial. This navigation just works with css there is no javascript involved.

 

Before you begin coding you should make your graphics for your navigation. The design of your graphics is important to make the rollover effect work seamlessly.  Below is one of the navigation buttons and as you can see both the normal and hover stats are all in the one graphic.

Key points

Make sure the normal and hover stats are the same size.

Try to use a height that is easy to half like a hundred pixels not something like 97 as a pixel of the other stat might shine though.

Don't forget to make the background image, which is the length of the navigation.

HTML step

So for the html, simply create a div tag and give it an id which I have called rollNav. Then inside of that create your anchor tags and give them each a unique id. Put the &nbsp in the anchor tags which stops the glitch in Internent Explorer.

<!—html elements-->
<div id="rollNav">
	<a id="webDesign" href="">&nbsp;</a>
	<a id="css" href="">&nbsp;</a>
	<a id="xhtml" href="">&nbsp;</a>
	<a id="javascript" href="">&nbsp;</a>
</div>

CSS step

Okay, so for the div rollNav set the width and height the same as the background image.

Then put in the background image and set it to no-repeat top left using the shorthand method.

Now for each anchor tag, we want to change them from inline to block elements and we do this by changing its display to block as seen below.

Then float each anchor tag left, so they all fall inline with each other and use margin-left to push the nav buttons apart.

So the next thing we do is refer to each button by their id and insert the button image as the background.

The key here is to set the height of the anchor tag to half the button image size and when setting the background make sure its no-repeat plus top left. This is key!!

Then when the mouse moves over the button we use the hover method and the only thing we change in the background is top to bottom. Which repositions the image and shows the hover stat, when you move off the image it goes back to normal. Repeat that for your other buttons. Look at the css code below to get a good idea.

So it pretty simple hope you like it. There are other great methods of making navigation which I will be showing soon, so keep a look out.

#rollNav{
	width: 400px;
	height: 50px;
	background:url(css_rollNav/navBG.jpg) no-repeat top left;
	padding:0;
	margin-left:5px;
}
#rollNav a{
	display:block;
	float:left;
	margin-left:15px;
}
#webDesign{
	background:url(css_rollNav/webDesign.jpg) no-repeat top left;
	width:90px;
	height:40px;
}
#webDesign:hover{
	background:url(css_rollNav/webDesign.jpg) no-repeat bottom left;
	width:90px;
	height:40p
}
#css{
	background: url(css_rollNav/css.jpg) no-repeat top left;
	width:55px;
	height:50px;
}
#css:hover{
	background: url(css_rollNav/css.jpg) no-repeat bottom left;
	width:55px;
	height:50px;
}
#xhtml{
	background: url(css_rollNav/xhtml.jpg) no-repeat top left;
	width:77px;
	height:50px;
}
#xhtml:hover{
	background: url(css_rollNav/xhtml.jpg) no-repeat bottom left;
	width:77px;
	height:50p
}
#javascript{
	background: url(css_rollNav/javascript.jpg) no-repeat top left;
	width:84px;
	height:50px;
}
#javascript:hover{
	background: url(css_rollNav/javascript.jpg) no-repeat bottom left;
	width:84px;
	height:50px;
}