Pure CSS Rollover Navigation

1

By roryt on Jan 2nd, 2007 2:57 am

Ad: IT HelpDesk & Customer Support Software

This piece of css will show you that it is perfectly possibly to create a good looking navigation bar without any images or javascript and just a couple of lines of css.

All you need to do is create a html file that contains a unordered list in it with your navigation links in it as <li>. You will then need to simply attach the css file to your html.

I hope this will help you to realise that it isn't all about huge flash navigation and rollover images.

You can find my example here.

/* CSS Document */

body	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #999999;
	margin: 0px;
	}

ul	{
	float: left;
/*this part will stop it moving when the page scrolls so you may not want to include it*/

	position: fixed;
	margin-left: 20px;
	}

li	{
	width: 150px;
	height: 15px;
	margin-top: 3px;
	border-style: solid;
	border-width: 1px;
	border-color: #64acd8;
	font-weight: bold;
	font-size: 120%;
	background-color: #ffffff;
	list-style: none;
	padding: 3px;
	}
li:hover	{
	background-color: #faffd8;
	border-color: #004f7b;
	}

a:link	{
	text-decoration: none;
	color: #999999;
	}
a:hover	{
	text-decoration: none;
	color: #333333;
	}
a:visited	{
	text-decoration: none;
	color: #999999;
	}

a:active	{
	text-decoration: none;
	color: #FF0000;
	}

5 Years Ago

0

Very nice. The only thing is that the a:hover colour doesn't work in combination with the colour of the list.

Pim

Junior Poster

106 posts since Jun 2005

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

4 Years Ago

0

awesome buddy