styling links using CSS

Question

.hi guys, i have a little problem on styling my menu bar. i have the following code:

#can_header {
    width:1024px;
    height:140px;
    background-color:#8D96A8;
}
#can_header ul{
    list-style-type:none;
    margin: 0;
    padding: 110px 0 0 550px;
    font-family: adolph;
    text-transform: uppercase;
    font-size: 1em;
}
#can_header li{
    display:inline-block;
    line-height: 15px;
    border-right: 2px solid #CCC;
}
#can_header li#item-104{
    border-right: none; 
}
#can_header ul a:visited{
    color:#CCC;
    text-decoration:none;
    margin-right:15px;
    margin-left:15px;
}
#can_header ul a:link{
    color:#CCC;
    text-decoration:none;
    margin-right:15px;
    margin-left:15px;
}
#can_header ul a:hover{
    color:#EB1886;
}
#can_header ul a:active{
    color:#FFFFFF;
}

what i want to do is that when i click one of the links on my ul the color of the selected link will permanently change while on the page of the link. with my present code the color of the link only changes while on-click.. but when the page changes the color will be back to normal. TIA! More Power!

.By the way I'm using Joomla, i'm just editing the CSS of the template that i made.

Answer 1

I'm afraid what you want to do isn't possible with CSS only. What you can do is create a css class that indicate that an item in your menu is selected and assign that class to your li element either using javascript or server side when you render the template

Answer 2

You can't do that with CSS alone, you need to add some class to the selected link (ie class="selected" ) using Javascript or PHP.

Then you can add a style rule for links with class .selected .

Answer 3

Their right you can't do that with CSS alone. You can use:active and change the text-color, or whatever, while it is being clicked down (aka onmousedown) but you can't have it change like blue + click = red.

JQuery should be able to help you with this though.

Answer 4

This will be handled by the menu module you are using to display the menu. Most modules have the option to turn on active highlighting which basically does what everyone is talking about, adds a CSS class to the active menu item. Chances are all you need to do is turn on the active highlighting on and add the appropriate CSS.

Also, I noticed you are turning off a right border in one of the menu items by using the itemID. You would be better off using the:lastchild psuedo selector in case you ever change the order of your menu items or remove the one you have chosen to be last.

Instead of #can_header li#item-104 use #can_header li:last-child

Answer 5

You should add css class programmatically to child object based on requested page.

An Example with php:

function GetFileName()
{
    $currentFile = basename($_SERVER["PHP_SELF"]);
    $parts = Explode('.', $currentFile);
    return $parts[0];
}
$basename = GetFileName();

<li>
    <a href="index.php" <?php if($basename =="index") echo "class='current'"; ?>>Home</a>
</li>
<li>
    <a href="about.php" <?php if($basename =="about") echo "class='current'"; ?>>About</a>
</li>