Monday, January 09, 2006

2nd Level Navigation

I think that FLOAT is best avoided if possible. What worked fine in Safari and IE on the Mac did NOT work fine on IE on Windows. I was previously floating the SG corner logo and the putting the banner next to it. Totally unnecessary, now that I think about it. When you have two elements that have known pixel dimensions, using absolute positioning makes much more sense. I keep running into this at work, too: if you have two possible solutions, pick the simplest one. A lot of times, I think I understand something, but I really don't. But that's OK! Part of learning is getting over the fact that you don't know everything you need to know :-)

So I've been searching and searching for tutorials on doing second level navigation with CSS tabs. Most of the solutions I have seen require the first level of tabs to be all the same width and in some implementations, changing the font size in the browser badly breaks the tabs. Not good... Too many compromises are being made to do something that should be simple. That should be your first clue that you are barking up the wrong tree.

I think the problem is that folks are trying to used nested unordered lists to acheive the two levels. This is a mistake, in my opinion. It would make sense to do that if access to second level navigation was necessary on every page. But that's hardly ever the case. Second level navigations is only of any good to users if it is attached to the first level navigation that it goes with! Using nested unordered lists in this manner produces a site map on every page in browsers that don't support CSS.

Loading the user up with information that they don't currently need is no favor to them!

So my two-level navigation solution is simple: instead of using nested unordered lists, I'll use two sets of unordered lists. The main tabs will be on the first set and the second level navigation will be on the second set. This means that the main tabs can stay the same for each page, while the second level navigation will have to be re-written for each main level. That's not so bad, really. And it keeps a lot of unnecessary code out of individual pages.

I can't believe I've wasted a whole day looking for a no-good solution when there was a simple, correct, one waiting for me at 9 pm!

P.S. I still don't know how/when to use FLOATs :-)

No comments: