David John Mead
Living and working on the web, with a British point of view
-
One navigation list to rule them all?
(0)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:
<ul id="navMain">
<li><a href="#" title="">section 1</a></li>
<li><a href="#" title="">section 2</a></li>
<li><a href="#" title="">section 3</a></li>
<li><a href="#" title="">section 4</a></li>
</ul>
Somewhere further down the page, within a section, I’d have:
<ul id="navSection">
<li><a href="#" title="">page 2a</a></li>
<li><a href="#" title="">page 2b</a></li>
<li><a href="#" title="">page 2c</a></li>
<li><a href="#" title="">page 2d</a></li>
</ul>
Another approach
Which normally would be displayed like image 1. Now what was tickling my mind was writing the code out like this:
<ul id="navMain">
<li><a href="#" title="">section 1</a></li>
<li><a href="#" title="">section 2</a><ul id="navSection">
<li><a href="#" title="">page 2a</a></li>
<li><a href="#" title="">page 2b</a></li>
<li><a href="#" title="">page 2c</a></li>
<li><a href="#" title="">page 2d</a></li>
</ul>
</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
Blogged with the Flock Browsercoding, css, html, lists, secondarynavigation -
How do you solve a problem like IE6?
(2)A recent article on Ajaxian.com looked at Digg’s survey about IE6 use. I think it really just validates what we already know, which is…
- Most IE6 users are at work and cannot upgrade
- Some user just don’t care to upgrade
So how should you address this? The one solution that I personally feel most comfortable with is Andy Clarke’s Universal IE6 stylesheet. This lets the visitor access all the content as well as releasing the designer/developer from a spiraling descent into madness, trying to make pages look the same. I’ve recently added it to my freelance site.
One IE6 solution I cannot get behind is proposed at http://ie6update.com/. This displays a bar designed to mimic IE’s own information bar. When the user clicks on it they get directed to the IE download page. This is so open to misuse and, even with the best intentions, still smacks of trickery.
As to that old chestnut of ’supporting IE6′, well I’m not Microsoft, so I don’t have to “support” anything they make. Same goes for supporting Apple, Mozilla, or Opera products. What I do have to do however, is make sure that any visitor, using any method, can access information and perform transactions on a site I’ve built.
Should it look graphically the same for a seven year old browser as it does for the latest & greatest? No. Should it prevent the seven year old browser from entrance? Certainly not.
So here’s to IE6 slowly going away but, in the meantime, lets not make the visitors who have no choice in using it feel alienated.
Technorati tags: ie6, css, solution, support, web, design
Blogged with the Flock Browsercss, design, ie6, solution, support, web -
Reply to latest “tables for layout”…
(0)I’ve posted a reply to the latest “use tables for layout” distraction over at Refresh Cleveland. Feel free to drop me your thoughts there.
comment, css, layout, refreshcleveland, reply, tablesTechnorati tags: tables, css, layout, comment, reply, refreshcleveland
Blogged with the Flock Browser
