Need help shading active tab on Reusable Top Menu

[doubledee]

I have a Top Menu that I put in a PHP include file so that the Top Menu appears on every web page, but I only have to update the code in one place.

 

<div id="header">
<a href="<?php echo WEB_ROOT ?>index.php">
	<img id="logo" src="<?php echo SECURE_WEB_ROOT ?>images/MyLogo.png" />
</a>
<ul id="topMenu">
	<li class="current"><a href="<?php echo WEB_ROOT ?>index.php">Home</a></li>
	<li><a href="<?php echo WEB_ROOT ?>news.php">News</a></li>
	<li><a href="<?php echo WEB_ROOT ?>sports.php">Sports</a></li>
	<li><a href="<?php echo WEB_ROOT ?>business.php">Business</a></li>
	<li><a href="<?php echo WEB_ROOT ?>weather.php">Weather</a></li>
</ul><!-- End of #TOPMENU -->
</div><!-- End of #HEADER -->

 

Using CSS, how do I make it so that the active page/tab is shaded a darker blue?

 

The code that drives the shading of the active tab is supposed to be...

 

class="current"

 

and

 

#topMenu li.current,
#topMenu li.current:hover,	/* NEW */
#topMenu li:hover{
background: #4682B4;											/* Steel Blue (darker) */
}

 

It seems to me that I have to have the header code in each web page in order for this to work?!

 

 

 

 

Debbie

 

 

[gizmola]

There's a lot of different ways to handle this, but just from a static point of view, if you have a variable in each page like:

 

$page = 'news' or if you prefer a constant: define('PAGE', 'news');

 

This assignment just needs to be made before your include of the top_menu.

 

Then you need a simple ternary.  I would probably put something like that in a function (application of DRY principle) but I'll just show you the code for one li.

 

</pre>
<li echo class="current" :>>News</li