1,105,644 Community Members

Pure CSS Rollover Navigation

Member Avatar
Reputation Points: 150 [?]
Q&As Helped to Solve: 19 [?]
Skill Endorsements: 4 [?]
 
1
 

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;
	}
Member Avatar
Pim
Junior Poster
106 posts since Jun 2005
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
wickedsunny
Junior Poster in Training
96 posts since Oct 2008
Reputation Points: 0 [?]
Q&As Helped to Solve: 5 [?]
Skill Endorsements: 0 [?]
 
0
 

awesome buddy

Member Avatar
saurabhpandey
Newbie Poster
1 post since Oct 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

nice dude.....really gud...

Member Avatar
ko ko
Practically a Master Poster
673 posts since Jan 2009
Reputation Points: 97 [?]
Q&As Helped to Solve: 152 [?]
Skill Endorsements: 1 [?]
 
0
 

nice .. menu.. a:hover color should be work; you need to change 'a' element to block type. Here ..

a { display: block }

so, it give anchor link to full width of 'li' and the color will work when hover.

You
Post:
Start New Discussion
Tags Related to this Article