changing color of inactive menu links in a menu

[pradeepjain]

i have a menu of 4 items.all text color is white. and when i click a menu link the other menu items text color should change to black! Is it possible to do with css or javascript help is needed for this !if any example is there this would help me a lot as i am not gud in javascript!

[prabirchoudhury]

1. Its easy to use css and whenever you are in web development then good practice to use css

2. in the normal way only selected menue button get change .. then other that make sense to the user that this button has been selected.. but dont get other button color change.
3. i have given css code for that menu changes.. do other changes if you need ..


4. call the menu_text class frm the <span class=menu_text ><a > menu1</a> </span>
<span class=menu_text_selected ><a > selected menu</a> </span>

5. but you need to do little bit logical argument here. in the begaining of the page need to find what page is that being selected, have to pass a flag or page id frm the menu link selected. like

 
<span <? if ($_GET['btn'] ==page1) { echo "class=menu_text_selected ";}else {echo "class=menu_text";}?>>
<a href="page1.php?btn=page1> menu1 </a></span>
 
<span <? if ($_GET['btn'] ==page2) { echo "class=menu_text_selected ";}else {echo "class=menu_text";}?>>
<a href="page1.php?btn=page2> menu2 </a></span> 
 
 

and so on for all the menus

css code ...
.menu_text {
 color : white;
    text-decoration : none;
    font-size : 11px;    
}
.menu_text A {
    color : white;
    text-decoration : none;
        font-size : 11px;
  }
 
  .menu_text A:HOVER {
    text-decoration : underline;
    color:#147404;
    font-size : 11px;
  }
 .menu_text_selected {
    color:black;
    font-size : 11px;
  }
.menu_text_selected a {
  font-weight: bold;
  color:black;
  font-size : 11px;
  }
 
.menu_text_selected a:hover {
  font-weight: bold;
  color:black;
  font-size : 11px;
  }
 
 

[pradeepjain]

The way u said is okie but instead of using 2 span classes u can just use a:active which does the job for u.I have done this!!
The way i asked for is clients requirements ..any idea on how to get it done :)

@prabirchoudhury

[Dormilich]

I see no other possibility than using Javascript. (although your Client's requirement really doesn't make much sense)

basicly you have to make all links black and then make the current link white again.

concept

links = document.getElementsByClassName("menu"); // the class refers to your links
 
foreach // this is not valid, but you know what I mean…
{
  link.addEventListener("click", makeBlack, false); // check out the workarounds for IE!
}
 
function makeBlack()
{
  foreach // …
  {
    link.style.color = "black";
  }
  this.style.color = "white";
}

[prabirchoudhury]

that’s true.. it is not abt that he is client and paying for that and any how we do have to make for this .. follow the web standard also important..