1 reply [Last post]
fluffypinktofu
Offline
newbie
Last seen: 13 years 22 weeks ago
Timezone: GMT+11
Joined: 2006-06-09
Posts: 1
Points: 0

Hi everyone!

I'm trying to create a vertical menu in CSS that has a highlighted image (or even underlined text) when showing the current URL page.

At the moment I have a working menu which shows hovers etc but doesn't show what page the user is actually on. A colleague suggested using 'pagebgimage' but I'm not too sure how/where to use it in the code.

Any advice or suggestions would be greatly appreciated Smile

Cheers, Monique

Here is my code so far:

/* =-=-=-=-=-=-=-[Menu]-=-=-=-=-=-=-=- */	
#menu {
	width: 150px;
	margin: 2px;
	}
	
#menu li a {
  	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	}	
	
#menu li a:link, #menu li a:visited {
	color: #888;
	display: block;
	background: url(buttons/menu.gif);
	padding: 8px 0 0 30px;
	}
	
#menu li a:hover, #menu li a:active {
	color: #283A50;
	background: url(buttons/menu.gif) 0 -32px;
	padding: 8px 0 0 30px;
	}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

'current page' background image problems for CSS menu

You need to attach a class or ID to whatever link is active on a particular page and then assign to that the same style as your hover, e.g.:

#menu li a:hover, #menu li a:active, #menu li#myActiveLink a {
   color: #283A50;
   background: url(buttons/menu.gif) 0 -32px;
   padding: 8px 0 0 30px;
   }

Actually, your code would be neater like this:

#menu li a {
     height: 32px;
   text-decoration: none;
   color: #888;
   display: block;
   background: url(buttons/menu.gif);
   padding: 8px 0 0 30px;
   }   
   
#menu li a:link, #menu li a:visited {
   background-position: 0 0;
   }
   
#menu li a:hover, #menu li a:active, #menu li#myActiveLink a {
   color: #283A50;
   background-position: 0 -32px;
   }

I've taken the voice-family hack out because it's an outdated method and there's probably a better way to do whatever it was you're hoping to accomplish if you explain to us what it is.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference