Clagnut

Menu

Tabs revisited

§ Web standards · Accessibility

Not so long ago, I posted a first pass at CSS tabs with lists which, importantly, included secondary navigation and mouseover effects on the tabs themselves. My implemenation wasn’t bad but it was flawed.

Radu Darvas has since come along and made some big improvements, in particular the primary and secondary navigation are now nested lists, as logic dictates. There is also the addition of images to give a more tab-like appearance. In fact, I reckon that this implementation is the ultimate starting point for any tab system, only fonts, colours and images (the easy stuff) would need to be changed to give any look required. (Actually I’ve just checked this on IE5/Mac and they fail – however setting a width for the tabs would fix this).