keeping css drop down menu item highlighted with php

Question

My Website

On the link above you can see that I have a CSS drop down menu in my site. It works fine, however, I want the top level items to stay highlighted when I'm on the page they represent.

I have this so far but it won't work (I'm only showing one menu item which doesn't have any sub menus as it saves space)

Here's the HTML:

<ul>
    <li><h2><a name="donate" id="donate" href="index2.php?op=Donate">Donate</a></h2></li>
</ul>

Here's the CSS that colours the background:

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

The content of each page is determined by the value of $head: $head = $_GET['op'];

I tried to implement the change by placing this straight after the menu:

if($head == "Donate") {
echo '<style>
#menu a donate {
color: #000;
background: #fff;
text-decoration: none;
</style>';
}

When I leave 'donate' out of the above code: '#menu a {' the background color of all the menu items changes to white, but I need to change the 'donate' button specifically. I tried doing this by adding id="donate" / name="donate" to the menu item (as seen above), and then calling it in css with '#menu a donate {'. but that is obviously wrong as it doesn't work! What should I do?

Answer 1

I think you need to use

if($head == "Donate") {
    echo '<style>
    #menu a#donate {
        color: #000;
        background: #fff;
        text-decoration: none;
    }
    </style>';
}

as a selector instead, because donate is an id for the a tag, therefore it comes immediately after the a tag (no spaces) with a "#" in front.

You were also missing a "}" closing bracket for the css declaration.

Answer 2

OK, quick and dirty answer : your CSS selector wont work, because right now it search for a tag "donate" inside a "a" tag inside a tag with the id "menu". I assume all your link have a specific Id, so the easy way to do it is to use this selector

 #donate
 {
     color: #000;
     background: #fff;
     text-decoration: none;
 }

As an added bonus, this selector will be faster to parse by the browser.

By the way, you seem not to close the style tag. Is that an error?

Now, for a longer answer, it is not exactly the best way to do it. I suggest you create a CSS class with a name like "currentpage" and to use it like this in your menu

<li><h2><a <?php if($head == "Donate") echo 'class="currentpage"'; ?> id="donate" href="index2.php?op=Donate">Donate</a></h2></li>

That way you can keep your style in the stylesheet where it will be easier to maintain. Now of course, if all your menu tags are handcoded, you may find it pretty tedious to add the condition in everytag. If it's indeed the case, I suggest you create your menu using a loop.

By the way, you should remove the name attribute in the a tag, its a deprecated feature. id does the job just fine.