One navigation list to rule them all?

I’ve been using unordered lists for navigation for some time now, and I remember my excitement when the I first read about the suckerfish method. But one thing that keeps popping into my head recently is using one list for the main and secondary navigation on a page. I can’t recall if I’ve ever seen anyone talk about this or try it for that matter.

The lists

Say we have a site with four main sections and within each section is four pages.  Normally I would code up the following:

Somewhere further down the page, within a section, I’d have:

Another approach

Which normally would be displayed like image 1. Now what was tickling my mind was writing the code out like this:

</li>
<li><a href="#" title="">section 3</a></li>
<li><a href="#" title="">section 4</a></li>
</ul>

Usual position for secondary navigation

Where the correct sections navigation is inserted as the page is called. It could then be positioned absolutely on the page using CSS.  If you’re using skip links for screen readers, then “skip navigation” would only have to skip the one list, and if read out, then it’ll be read in context.

I know I’m not taking into consideration:

• drop down navigation (not a big fan now)
• footer navigation
• problems with certain layout designs and absolute positioning

but I think these could be overcome fairly easily.

I’m not suggesting that this is a be-all-end-all thing to use, more that I haven’t seen it implemented like this and wondered if anyone had any thoughts on the subject. I would love to hear any feedback.

Technorati tags: secondarynavigation, css, lists, html, coding