Whenever I create a navigation block for a website, I make sure it falls within a universal include file. This ensures that if I need to add a page or change the site navigation in any way, I just need to edit one file. Whether I’m working on a PHP or .NET project, these includes get processed server-side, allowing me to add a bit of code to set active states on the nav items. On jasongraphix.com for instance, I’m parsing the $_SERVER['REQUEST_URI']; and using the first “folder” to determine which list item to add an active id to. On .NET projects, I’ll usually pass a sectionname and pagename variable along with the include request and use that to choose the active section/page. Unless you’re running a completely database driven site, this is standard industry practice. Occasionally though, I have to add subnavigation to pages on older websites where site-wide include files do not exist, or where server-side coding isn’t an option. In these situations, I still want to get the navigation I’m working on into an include as it doesn’t take that much longer and will save me future work if the client decides to rearrange/rename any of the new pages.

Even on static html sites, you can usually use the good ole’ server-side include syntax to add a repeated block of code to multiple pages:

<!--#include FILE="subnav-section.inc" -->

Now let’s say you have a nav list in there like this: 

<ul class="subnav">
    <li><a href="1.html">Chocolate</a></li>
    <li><a href="2.html">Hazelnut</a></li>
    <li><a href="3.html">Coffee</a></li>
    <li><a href="4.html">Cake</a></li>
</ul>

Hopefully, you don’t give your pages vague names like 1.html, I’m just tossing those in there for brevity. Anyway, let’s say you want to change the background and text color to indicate which page you’re on - yea, I know…an active state, I was just explaining for those who might not know.

One cheap and dirty way I’ve found to do this is to add a wrapper div or even the <ul> itself around the include call with an added class that is specific to the page you’re on. Then, you can add the same class to the link and use the combination to set the active state.

To demonstrate, if you’re on the Coffee page (and who isn’t), your include call might look like:

<ul class="subnav coffee">
<!--#include FILE="subnav-tasty.inc" -->
</ul>

Inside that include, you’d have:

<li><a href="1.html" class="chocolate">Chocolate</a></li>
<li><a href="2.html" class="hazelnut">Hazelnut</a></li>
<li><a href="3.html" class="coffee">Coffee</a></li>
<li><a href="4.html" class="cake">Cake</a></li>

Then, within your css, you would add something like this:

.chocolate li a.chocolate,
.hazelnut li a.hazelnut,
.coffee li a.coffee,
.cake li a.cake{
   background:#000;
   color:#fff;
}

And viola, if you’re on the coffee page, the coffee nav item now has white text on a black background. Easy peasy.