¶ 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).
Comments
1
It’s a shame IE5/mac doesn’t display it properly and it doesn’t degrade nicely when you have a small window. Not convinced by it. Your version was better.
2
Actually, i made a small change in your own implementation, and it works fine in IE Mac, widthout specifying width.
http://www.l-c-n.com/lab/clagnut_tabs/tabs.html
It is not tested in Opera7, maybe it fails there. Let me know, I think I know how to fix that.
3
it’s a pitty they don’t work in IE/mac (and that I don’t have one to test it, too).
but setting a width would make those tabs no more flexible… must be some other way to manage it!?...
philippe: opera7 fails.
4
Yeah, that brakes pretty in Opera 7
5
Ok, i did one more small change to the css file, should work fine now. Same URL as below. Cross fingers :-)
6
Can we change this to rounded corner tabs either with right or left corner images or with css.
http://www.l-c-n.com/lab/clagnut_tabs/tabs.html
any suggestions or solution.
Add your comment
Comments are now closed on this post. If you have more to say please contact me directly.