Anne van Kesteren

Dynamic navigation template

Though I'm not the expert on server-side techniques, I'm actually a big newbie at server-side techniques, I think we can agree that the article of A List Apart about keeping the navigation current was not that much for the scripters among us (I'm one, I think, though I like the client-side better). Besides that, I think it has some accessibility issues.

A user with a non visual user agent (I know you can style for other media with CSS, but nobody does that), won't be aware, which link is current and which not, since it is only (in markup) recognizable through the single id attribute. The navigation template I made (with some help of Mark Wubben (note that echo versus escape was different help :-) )). Of course I give away the source code away for free.

As you can see my navigation template doesn't generate a element for the page you are on. If you still need this 'nested styling' (for example li a) you can add a em or strong element to replace the a element. If you think the current page 'pointer without href' has no more semantic meaning than the other pointers, you could use a span or an a without the href attribute (<span/> == <a/> in semantics).

Besides that my template generates a perfect nested list (without enters and spaces to avoid a bug in Internet Explorer, of which I first read in DWWS page 287, but it annoyed me for quite some time, since I always had to add a border-bottom value until now to fix that bug (big gaps between the li elements)) it also generates link elements. First the rel="section" and then the rel"subsection". This adds quite a bit of bytes to the contents of the head element, but it will make the page more usable for users who are using a browser, which interpreted these link elements, like Lynx and Mozilla (Opera doesn't support this type of rel values). Plus, theoretically; it will be better for search engines like the known-by-all Google.

The menu is un-styled and is only used as a simple template for the PHP code. This will save me some time, when I make such menus. And it is easily to remove out the 'nested list' stuff and only leaving the simple unordered list. I hope it can be of use to you sometime.


  1. As I already told you, too bad it's not OOP ;-)

    Perhaps I can give an OOP version of this a go, some day. (Hell, this is so damned useful I think I have to make my own version of it :-) )

    Posted by Mark Wubben at

  2. I was hoping someone would say that. Everyone who thinks he can do a better job (isn't that difficult I think) can trackback me with better code! Otherwise, I will agree with you that I have written a great peace of code... ;-)

    Posted by Anne at

  3. If you still need this 'nested styling' (for example li a) you can add a em or strong element to replace the a element.

    Surely you're not suggesting that people use the semantic elements <em> and <strong> for purely presentational effect? Surely, you meant "<i> and <i>" or "<span style='font-style:italic;'> and ..." or whatever.

    And after we went all around the block on this subject!

    Oh wait...

    Posted by Jacques Distler at

  4. But seriously...

    An object-oriented version would be very nice. This one is already an improvement on the ALA version (I hate the way PHP encourages the mixing of code and data).

    Posted by Jacques Distler at

  5. On a mostly unrelated note, thanks for the clue to solving some problems I was having with lists in Internet Explorer. Never occurred to me to blame whitespace in my source code....

    Posted by Bill Mason at

  6. Jacques,
    It was not meant for presentation, more for supporting screen readers. They can (currently) only read the difference in semantic markup, not in presentational.

    Posted by Anne at

  7. Supporting screen readers?

    Posted by Jacques Distler at