show active button on nav menu

[jp12]

I want to make each button on top in my nav menu stay highlighted when it’s on that respective page. Can I use the active class but also do I have to copy the menu on every page or is there a way to use php includes to the nav file?

HTML

<div id="menu">
<div class="logo"></div>
<div class="toplevelmenu"><a href="index.php"><span>HOME</span></a></div>
  <div class="toplevelmenu" id="whoweare"><a href="whoweare.php"><span>WHO WE ARE</span></a></div>
  <div class="toplevelmenu"><a href="howwedoit.php"><span>HOW WE DO IT</span></a></div>
  <div class="toplevelmenu" id="whatwedo"><a href="whatwedo.php"><span>WHAT WE DO</span></a></div>
  <div class="toplevelmenu"><a href="news.php"><span>NEWS</span></a></div>
  <div class="toplevelmenu"><a href="contactus.php"><span>CONTACT US</span></a></div>
</div>
<div id="dropdown_container">
<div class="dropdown" id="drop_whoweare"><table align="left" width="409" border="0" cellspacing="0" cellpadding="4">
 <tr>
  <td><a href="aboutus.php">The Company</a>&nbsp;&nbsp;&nbsp;&nbsp;|</td>
  <td><a href="#">Management Team</a>&nbsp;&nbsp;&nbsp;&nbsp;|</td>
  <td><a href="#">Support Team</a></td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td class="subsubmenu"><a href="#" style="color:#fff;">xxx</a></td>
  <td class="subsubmenu"><a href="#" style="color:#fff;">xxx</a></td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td class="subsubmenu"><a href="#" style="color:#fff;">xxx</a></td>
  <td class="subsubmenu"><a href="#" style="color:#fff;">xxx</a></td>
 </tr>
</table></div>
<div class="dropdown" id="drop_whatwedo"> <a href="riskmanagement_advisory.php">Risk Management Advisory</a>&nbsp; |&nbsp;  <a href="exchange_otc_brokerage.php">Exchange & OTC Brokerage</a>&nbsp; |&nbsp; <a href="margin_operations.php">Margin & Operations Financing</a>
</div>
</div>

CSS

div.toplevelmenu
{
width:110px;
height:21px;
float:left;
display:block;
background-color:#E4E4E4;
margin-left:5px;
padding-top:39px;
padding-left:20px;

background-image:url(../images/topbutton.jpg);
background-repeat:no-repeat;
}


div.toplevelmenu:hover
{
background-color:#ADD474;
background-image:url(../images/topbutton_green.jpg);
background-repeat:no-repeat;
color:#fff;
}


div.logo
{
background-image:url(../images/transparentlogo_lg.png);
display:block;
width:183px;
height:80px;
float:left;
margin-top:-20px;
}


div.toplevelmenu span
{
font-size:12px;
font-weight:bold;
color:#000;
}

div.toplevelmenu a:link 
{ 
  text-decoration:none;
}

.dropdown
{
width:983px;
float:left;
display:block;
background-image:url(../images/dropdown_back.jpg);
background-repeat:repeat-x;
padding-top:10px;
color:#fff;
padding:5px;
}



#dropdown_container
{
height:102px;
width:1000px;
float:left;
display:block;
}


.dropdown table, .dropdown table tr, .dropdown table tr td
{
text-wrap:none;
}

.dropdown#drop_whoweare
{
display:none;
height:90px;
font-size:15px;
font-weight:bold;
padding-top:12px;
}

.subsubmenu
{
 font-size:13px;
 font-weight:normal;
}

[htmlbasictutor]

Put an id in the body of each page identifying what page it is. e.g. id="about"

Give each menu item a style you can identify as that page. e.g. class="menuabout"

Then in the CSS create a style for the combination of the id and style. e.g. #about .menuabout with the styling you want to show that it is active.

[jon22]

Or you could use jQuery like this:

$(function(){
$page = jQuery.url.attr("file");
if(!$page) {
$page = 'index.html';
}
$('#menu a').each(function(){
var $href = $(this).attr('href');
if ( ($href == $page) || ($href == '') ) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});

then css

#menu a.active {background: #ff0000;}