CSS Tabs
I use tabbed browsers (Camino, Phoenix, Opera, Netscape 7) all the time, and quite a while ago I wanted to add a tab-style navigation design to this site. I figured it must be possible in CSS, but I never made the effort to get it to work.
Sometime since I started reading his blog in NetNewsWire instead of a browser, diveintomark implemented CSS tabs on his site. In fact, tabs are everywhere. In my research, I found three general approaches:
- Pseudo-navigation, in which the tabs do not open new html pages:
- Brainjar has both a tutorial and a demo.
- superflysmack
- q42 - this one is more hyper-navigation, since new sites are opened in the same page rather than hidden static content being cycled through the tabs.
- Simple navigation, in which the tabs represent three to eight main pages:
- diveintomark.org, the one which inspired many of the others. (See also his self-contained example page.)
- nontroppo looks clean and simple but seems to have border-bottom difficulties.
- Simplebits (with a demo of sorts)
- Tabs with submenus:
- Kalsey Group (with demo)
- Unraveled has both one-level and submenu examples.
- Clagnut (with self-explaining rather than functioning demo)
I found many of the links in a webgraphics blog discussion, but just looking up “CSS Tabs” in Google was overwhelming. I’ve only noted the ones that struck me in one way or another.
I adopted the diveintomark code for a personal webserver just so I won’t have to stare at my Netscape 2-era plain html link lists anymore, and I’m working on the Kalsey approach for new navigation for this site. I made a mock-up of what I’m hoping to achieve, and there are more tabbing meditations there filling in as filler text. One thing I forgot to mention is the rounded corners you should see if you’re using a Mozilla-based browser.
May 26th, 2003 at 1:44 am
Rounded tab corners
Jemima Pereira has added rounded corners to my CSS tabs code. By opening the code, it was made stronger. That’s the value of open source.