active menu

hi! I would like to mark the active menu with a differnt colour, I saw a lot of examples, but I cant solve it!

This is my html code:

	<div id="menu">
 <ul>
		<li><a href="page2.php?value=1"> Link1 </a></li>
		<li><a href="page2.php?value=2"> Link2 </a></li>
		<li><a href="page2.php?value=3"> Link3 </a></li>

	</ul></div> 

Code (markup):

And the css one:

#menu {
	position:absolute;
	top: 3%;
	width: 20%;
	border-style: solid;
	border-color: #0e69be;
	border-size: 1px;
	border-width: 1px;
	}
#menu li a {
	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	}	
#menu li a:link, #menu li a:visited {
	display: block;
	background: LightSkyBlue;
	padding: 8px 0 0 10px;
	}
#menu li a:hover {
	background: DeepSkyBlue;
	padding: 8px 0 0 10px;
	}
#menu li a:active { 
	color: #0e69be;
	background: SkyBlue;
	padding: 8px 0 0 10px;
	}

Code (markup):

Do you know how to do it?

Thanks!

 

Try this

html code:

<div id="menu">
 <ul>
		<li<?php if($_GET["value"]==1){ echo(' class="active_menu"'); }?>><a href="page2.php?value=1"> Link1 </a></li>
		<li<?php if($_GET["value"]==2){ echo(' class="active_menu"'); }?>><a href="page2.php?value=2"> Link2 </a></li>
		<li<?php if($_GET["value"]==2){ echo(' class="active_menu"'); }?>><a href="page2.php?value=3"> Link3 </a></li>

	</ul></div>

Code (markup):

css code:

#menu {
	position:absolute;
	top: 3%;
	width: 20%;
	border-style: solid;
	border-color: #0e69be;
	border-size: 1px;
	border-width: 1px;
	}
#menu li a {
	height: 32px;
  	voice-family: "\"}\"";
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	}
#menu li a:link, #menu li a:visited {
	display: block;
	background: LightSkyBlue;
	padding: 8px 0 0 10px;
	}
#menu li a:hover {
	background: DeepSkyBlue;
	padding: 8px 0 0 10px;
	}
#menu li a:active {
	color: #0e69be;
	background: SkyBlue;
	padding: 8px 0 0 10px;
	}

#menu li.active_menu{
    background: DeepSkyBlue;
}

Code (markup):

 

s_ruben is right on with his using something like php to determine what the current page is, and if it's the current page you put a class on it.

That said, you appear to have a whole bunch of unnecessary bulk in there... Though the biggest problem is you seem to think :active is the 'active' menu item. :active is a state that means the anchor is SELECTED and being processed, much akin to :focus and has nothing to do with what page you are on. As a rule of thumb you are best off treating :active, :focus and :current as all being the same thing.

As to your CSS,

1) what the devil are you absolute positioning your menu for? That's usually layout /FAIL/ right out of the gate.

2) all those percentage positioning are likely to break cross-browser... Not certain what you are trying to accomplish except that yer going about it all wrong.

3) what do you have that useless DIV around it for - all that can be applied to the UL directly.

4) you want a consistent height, instead of dicking with that IE 5.2 mac hack nonsense just declare your line-height and padding.

5) if all of them are getting the same padding, state it once on the parent state not on every single element.

That would chop the HTML down to:

<ul id="menu">
	<li><a href="page2.php?value=1" class="current">Link1</a></li>
	<li><a href="page2.php?value=2">Link2</a></li>
	<li><a href="page2.php?value=3">Link3</a></li>
</ul>

Code (markup):

... and neuter the CSS down to:

#menu {
	list-style:none;
	border:1px solid #0E69BE;
}

#menu a {
	display:block;
	padding:12px 0 4px 10px;
	text-decoration: none;
	font:normal 14px/16px arial,helvetica,sans-serif;
	background:lightskyblue;
}

#menu a:active,
#menu a:focus,
#menu a:hover,
#menu .current a {
	background:deepskyblue;
}

Code (markup):

You'll notice I don't explicitly declare the height. Instead I set a px metric line-height. I assumed you wanted the entire height to total 32px - 16px line-height plus 12px top padding plus 4px bottom padding equals 32px. Hell of a lot cleaner and means no need for that voice-inherit hack nonsense.

... and remember one of the basic rules of CSS - only state what's DIFFERENT on child elements (that includes your pseudostates) and not the things that are the same!

 

You Should Use Also
<ul id="menu">
<li class="current"><a href="page2.php?value=1">Link1</a></li>
<li><a href="page2.php?value=2">Link2</a></li>
<li><a href="page2.php?value=3">Link3</a></li>
</ul>

Create Class for UL > LI.current a{

Your css here for active current menu.

}

Let us know if this solve your problem? PSD to HTML

 

1) you don't need the sibling selector

2) you don't need the tag prefix on the class.

3) you mean where I had "#menu .current a" which is functionally identical?

Oops, you're right, it should have been:

<li class="current"><a href="page2.php?value=1">Link1</a></li>

I had the class in the wrong spot for my example

 

Thank you very much! It works perfectly and I learnt with your coments!!

 

great one ty