Active States on the Cheap

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.

6 Comments

  1. I use a similar technique.

    Instead of adding the class attribute I put and id on the li that doesn’t contain the link, but pure text. This way, the user won’t get confused and will have one more thing to tell him exactly where he is at.

    Of course, some server side scripting is needed to do that. Your example is suited for pure HTML, but I thought I’d share this anyway. Pseudo code:

    (if this page = chocolate)
    <li id=”current”>Chocolate</li>
    (else)
    <li><a href=”chocolate.html”>Chocolate</a></li>

  2. It looks so clean…

    I’m eagerly awaiting the day I can take over the design of the nav. section of the site at work. To add a menu item, I have to add code to the nav include and the main stylesheet. If you do your math wrong in the style sheet, stuff vanishes from the menus.

    My current prototype is light years ahead of the mess we have now. The new implementation will use SIFR to dump the text/images and an unordered list for the nav. I have to keep the drop downs in the current design but I want them to go a way the next time we re-do the layout. I wish the marketing group that designed the layout allowed for at least a bread crumb trail.

  3. Wow, I just re-read my comment I think I was thinking faster than I was typing. It makes little sense if you don’t know anything about the web site I’m taking over or what was flying through my mind at the time. I’ll try to clarify. It’d be easier to understand if I didn’t omit names to protect the innocient.

    Basically, what I was trying to say is that the current method to navigate said web site seems tedious.

    My new method should be more straight forward b/c I was going to rely less on the css to position each navigation element individually but, more on the css to control the layout of the navigation as a whole. My method takes about a third of my main stylesheet while the current is about three quarters of the stylesheet, 100s of lines long and scary to read.

    I also need to dump the current idea of using an image to display headers in fancy fonts and use the sIFR technique to replace text with a flash representation of the same but, with the fancy font. This keeps me from having to open my image editor just to add a new page of content (and later make content creation easier).

    Finally, I’m fustrated because we got the layout from a marketing company our marketing team contracts with, and the layout will need a lot of tweaking in the future as I hopefully get our marketing team on board with some of the newer ways to use the internet for marketing.

  4. Oh, now I get it.. :P. That huh wasn’t aimed at you Brian. My complete lack of understanding about anything that looks like this:
    <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>

    was the real reason for the “huh?”But maybe the other readers understand more now :).

  5. Amy,

    I figured that was the case. As I re-read my comment, I realized it was confusing and decided to attempt to clarify it.

    B

Leave a Comment

Latest Tweet
  • @MarcoSuarez Our 4yo loved ever second. Our 2yo covered her ears & eyes a few times but gave it 2 thumbs up at the end.
Somewhat Recent
The Whole Nine Yards