Question

Lets say I have 5 pages: A, B, C, D, and E. I also have a horizontal menu, and each item has a light gray background.

Each menu item has a:hover that gives it a medium-gray background, but I want the active page to have a black background, so I define

#black {     background-color: #000; } 

Now when the user is on B.php, I want the B menu item to carry the #black id. What is the best way of doing this?

Answer 1

A suggestion; don’t define what your style ‘is’, define what your style ‘does’. Don’t call it #black, instead call it .current.

Another thing to note is that ID’s are meant for identifying unique elements (#header, #footer, #main, #sidebar, #navbar, etc.). Defining a repeatable item as current should be done with a class, since you can have multiple classes associated with an element, but only one ID. Again, that ID is reserved for unique naming.

.current {     background-color: #000; } 

To associate this with a page you could set a variable on the page that indicates which page its on, then use an if block, or switch case, to add the style to the element that relates to the current page:

(pseudo code, my PHP syntax is rusty)

$current_page = 'B'  // -- snip --  <ul>     <li id='navigation-a' <? if ($current_page == 'A') { ?> class='current' <? } ?> >Page A</li>     <li id='navigation-b' <? if ($current_page == 'B') { ?> class='current' <? } ?> >Page B</li> </ul> 

Optionally you could try deriving $current_page from the page url in the request.