2 replies [Last post]
Guidovdr
Offline
newbie
Last seen: 18 years 7 weeks ago
Joined: 2004-08-09
Posts: 6
Points: 0

Hi,
I made this website using CSS:
http://www.cawdepapaver.be/deelwerking/moc.htm
For making the horizontal and vertical menu, I used this code:

#menu a {
	display:block;
	width:180px;
	margin: 1em 0; padding:3px 0 5px 10px;
	font: bold 11px/1 Verdana, Arial, Helvetica, sans-serif;
	color:#FFFF99;
	background: #993366 url(none) no-repeat;
	text-decoration: none;
	}
		
#menu a:hover {
	background-position: -157px 0;
	color: #FFFFFF;
	background-color: #FF33CC;
	}
	
#menu a:active {
	background-position: -314px 0;
	color:white;
	background-color: #FF33CC;
		}
	
#hmenu a {
	display:inline;
	width:200px;
	margin: 5px 1;
	padding:5px;
	font: bold 11px/1 Verdana, Arial, Helvetica, sans-serif;
	color:#FFFF00;
	background: #333366 url(none) no-repeat;
	text-decoration: none;
	border: none #000066;
	}
		
#hmenu a:hover {
	background-position: -157px 0;
	color: #FFFFFF;
	background-color: #FF33CC;
	}
	
#hmenu a:active {
	background-position: -314px 0;
	color:white;
	background-color: #FF33CC;

I want the color to which the menu item changes when the mouse comes over it, to stay as long as the link is active. I thought this was simple: just change the color of the rule:
#hmenu a:active {
but is seems this has no effect at all.
I don't understand. :?
Guido

mkjoker
Offline
Regular
Dresden
Last seen: 18 years 4 weeks ago
Dresden
Timezone: GMT+1
Joined: 2004-09-01
Posts: 40
Points: 0

How to change color of active menu item?

I think it works fine. Just try "open link in new tab" or "open link in new window" to see that the active link in the tab/window where you clicked it stays bright pink, while the same link in the new tab/window looks purple as all the other links.
The reason for this is that the link on the page that you opened is not the link that you just clicked. It only has the same caption and href-attribute, but it's part of a different html-file.

Guy
Guy's picture
Offline
Enthusiast
Cambridge, UK
Last seen: 11 years 13 weeks ago
Cambridge, UK
Timezone: GMT+1
Joined: 2004-04-26
Posts: 54
Points: 0

How to change color of active menu item?

Hi,

mkjoker is quite right. It would be lovely if active links would do that, but thats not how it works Sad ! The best way is to create a class/id selector for each link which is active on it's own page!

Before doing this i would urge you to look at the using unordered lists for your horizontal navigation bars. There are some great examples of these at http://css.maxdesign.com.au/listamatic/ which include methods to create the effect you were after Laughing out loud ! http://www.projectseven.com/tutorials/css/uberlinks/ is perhaps simpler to see.

There are also clever ways in which server side scripts can help manage very large menus for such affects :idea: !

Hope those tutorials help!

Guy

Who discovered we could get milk from cows, and what did he THINK he was doing at
the time? - Billy Connolly