Tab Test Pages: Tab 1

CSS Tabs with Submenus

Click on another tab to see the submenus.

This approach to tabs is taken from The Kalsey Consulting Group. See their blog entry on the subject.

I liked it because of the submenus and the straightforward CSS. No CSS hacks were used.

Additions

I changed a few fonts and colors and put in a background image. A less busy one would be preferable, so that the text could be read directly against it as at diveintomark.org.

Someone had mentioned using white-space: nowrap to prevent wrapping of the tabs, so I added that. I also added a hover background color change to the tabs.

I usually add whitespace at the bottom of story pages so that you don't get that jarring incomplete page-down when you hit the bottom of the story and lose your place. I added some to these pages, but not enough. My tracker image is also hidden in that dead space.

Plans

I do plan to use tabbed navigation, though initially only on main navigation pages. I have too many story pages to convert to a new navigation system by hand, so they will have to wait until the automated conversion tools for XML are ready - I'll probably use this as a practice case, and generate the output with PHP.

I haven't done a round of browser tests or bothered to hide the CSS from Netscape 4.

I may end up using two sets of tabs, one a short generic set on the home page which distinguishes me from my hostees, and the second an expanded set devoted to just my pages.