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.
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 :-) )
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... ;-)
If you still need this 'nested styling' (for example li a) you can add a
em
orstrong
element to replace thea
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...
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).
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....
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.
Supporting screen readers?