How to indicate that an LI with a link was pressed.

Question

I made a menu and want to keep a pressed button a different color. I.E. If I am at the menu page, the menu button of the menu will be blue.

I have read some online guides about menus and ended up with the following:

<div id="menu">

<ul>

    <li>
        <a href="/index.php" >home</a>
    </li>
    <li>
        <a href="/search.php" >search</a>
    </li>
    <li>
        <a href="#">1</a>
    </li>
    <li>
        <a href="#">2</a>
    </li>
    <li>
        <a href="#">3</a>
    </li>

</ul></div>

And the CSS would be something like this:

#menu ul li a.selected{
background:blue;
color:#000;
}

Of course every LI has height and stuff so that it has some color. The question is how can I tell the HTML that a button is selected? The HTML attribute or something?

And another dilemma that I have is how best to change these selected? I can check the address using PHP and change the selected according to it. Any suggestions how to best do it?

Answer 1

You could go with :

<li>
<a href="/search.php" 
<?php 
    if(strstr($_SERVER["REQUEST_URI"], "YOURPATH/index.php")) 
      echo "class='selected'";
?>
> Home </a>
</li>

or using the Javascript equivalent "document.URL". Might not be the cleanest solution but should do the thing.