Achieving "current" when using single menu include

HTML & CSS
1

This is CSS bordering on PHP but the problem I have labeled as css. Not sure if there is an answer to this in fact but here’s the question …

I have used includes for main sections such as header, menu (a horizontal in this case), sidebar, footer etc. All in an effort to speed up site wide changes when additions made etc.

However, by having a common include for a single menu code - this precludes me from applying a "current’’ class to the relevant menu category for various pages being brought up by that menu.

Of course I could split up the includes into categorized menu files to be able to use ''current" but then I am losing the benefit of a single menu include file and thus getting closer to the situation whereby menu was not an include and then it would have to be part of the html page file and so changes would require something more involved.

Not sure if this describes well enough – any ideas? If not clear enough I’ll try and elaborate.

2

Thx for reply. Sounds logical as a scheme, if I am seeing it clearly.

Are you meaning to add the relevant body ID within a specific page body tag? I can see the basis of what you suggest but yet to see with total clarity how the targeting will connect with a menu item ID construct. If you can expand just a bit it would be most helpful if you wouldn’t mind.

3

Dan, many thx … that clarifies very nicely and I am most appreciative of your input. I will test this out soon as I can.

4

your menu:

<ul>
<li id="menu-home"><a href="/">Home page</a></li>
<li id="menu-about"><a href="about.php">about us</a></li>
<li id="menu-contact"><a href="contact.php">contact us</a></li>
<li id="menu-..."><a href="....php">...</a></li>
</ul>

index.php:

<body id="home">

about.php:

<body id="about">

contact.php:

<body id="contact">

now in your css:

#home #menu-home {
/* this will only take effect on home.php and 
    target the #menu-home li item */
  font-weight:bold;
}
#about #menu-about {
/* this will only take effect on about.php and 
    target the #menu-about li item */
  font-weight:bold;
}
5

apply an ID to your body, such as about, home, contact etc., and and id on your menu items, such as menu-about, menu-home, … and then use that to target them:

#home #menu-home {
}
#about #menu-about {
}
…