I was recently designing the interface for a site that called for tab navigation and where the users were limited to a small in-house group. Partly because of the limited audience, and also because of the inherent advantages, we chose to code entirely in CSS.
I'd seen some really great examples of unordered lists turned into tabs (such as Adam Kalsey's) and figured I'd give it a go. However, I wanted to avoid absolute positioning of the tabs so there could be flexible height objects above the tabs and also so the text-size could increase and decrease nicely. Anyhow, this is what I came up with. The subtle hover effect was a nice bonus and adds a tactile quality to the tabs. Feel free to use these or modify them for your own project (download a ZIP). If you improve on them, I'd appreciate a copy by email.
This has been tested in: (Windows: IE5, IE6, Mozilla) and (Mac: IE, Mozilla, Safari has bugs)
Comments
Jevon - September 16, 2003 3:27 pm
Man, Nice tabs!
What is the bug in Safari? They look excellent here.
Derek Rose - September 16, 2003 3:35 pm
In Opera 7.20 on the PC all of the tabs are stacked on top of each other, all you can see is "Contact Us".
Daniel Burka - September 16, 2003 3:49 pm
Thanks Jevon. In Safari here at the office, the active tab wasn't overlaid correctly as is shown in the image in my post. Other than that I think everything was OK.
<p>Derek, as I posted, this was entirely an internal application where I knew which browsers would be used. Hence, I stuck to the standards and didn't do much bug fixing. If you fix the Opera bugs, I'd appreciate it, but I don't think I'll be taking the time to bug fix this too much. Thanks.</p>
Gilbert - September 17, 2003 12:43 pm
that's totally smooth. nice work. thanks for sharing too. i wish you guys would be more active in your blogging. there would be more stickiness to it, if you know what i mean.
Daniel Burka - September 17, 2003 2:23 pm
Thanks Gilbert. I've actually just updated the files a bit. I realized I was using too many classes where inheritance stuff would suffice. The lists are a bunch cleaner and a few classes have been removed from the style sheet.
I understand your point about the gaps between updates on this site and it being difficult to check back to see if there's anything new. However, we didn't really intend to post here every day. We figured that when we came up with something worth sharing it would be cool to have somewhere to share it with others. There is an RSS feed (see the left bar) for both the posts and the replies. If you're using an RSS reader hook these up and you'll know right away when there's something new.
smu - September 18, 2003 6:25 pm
tabs stacking in nn6 too.
Steven Moussawer - September 22, 2003 10:54 am
Regarding the problems in Opera and Netscape... DUH! Those browsers suck, use a good browser such as IE or Firebird/Mozilla.
Gilbert - September 23, 2003 3:59 pm
I thought I would share this to the group. It's Eric Meyer's rounding tabs. Maybe it can be an enhancement to the css tabs here.
<a href="http://www.complexspiral.com/publications/rounding-tabs/" target="_blank">http://www.complexspiral.com/publications/rounding-tabs/</a>
Daniel Burka - September 30, 2003 3:59 pm
I got a question from an Italian designer asking how I had anticipated doing the active version of a tab from the bottom level. I've gone ahead and added that level to the style sheet and HTML, so when you click on Details and then on Our Portfolio, you can then click on Details again. Hope this is helpful.
Jérôme - October 30, 2003 9:07 pm
I wondered if it was possible to make the tabs more centralised so that I can define the tabs and submenu items at one single place instead of having to define them in every single file.
At first I tried to make a simple include, but I quickly saw that this was not possible because of the active state of the tabs.
So I wrote two functions to display the tabs and the submenu items. You can see the results and a guide how to use this method at http://nonsense-productions.net/tabs/.
This method has the advantage that any changes to be made can be applied by editing just one file (/includes/functions_menu.php). In every file you have only to include the file and call the specific function which will never change.
I would appreciate your comments and propositions to make the script better. And please, excuse and tell me my english mistakes ;).
Many greetings
- Jérôme
Gary Haran - November 5, 2003 5:20 am
I'm going to be using the tabs on my home page soon. As you probably know Internet Explorer seems to have a little problem with the first-child pseudo element.
I wish I could just ignore IE altogether but too many clients still rely on that clunk. I came up with this quick fix to be inserted after the style definition :
<script type="text/javascript">
<!--
/**
* Internet Explorer not understanding first-child here is a quick fix to call onload
*/
function fixIE()
{
if (!document.all)return;
var uls = document.getElementsByTagName("UL")
var len = uls.length;
var li;
for (var i = 1; i < len; i++)
{
if (li = uls[i].firstChild) li.style.border = "none";
}
}
-->
</script>
and of course : <body onload="fixIE()">
I hope some people find this helpful.
Jon Winchester - November 16, 2003 8:30 pm
Inspired by this example, I used CSS tabs for my first website. A three-level nested list, it works (finally) in IE6, I havent messed with any others yet. http://www.personal.psu.edu/users/j/x/jxw388
D.Jardine - November 26, 2003 10:17 am
I was just wondering how these menus behave in Netscape 6. I know that there are layering problems with Netscape. I actually opened the site here, silverorange, in Netscape 6, and noticed the top menu had some positioning problems. Any comments?
Daniel Burka - December 1, 2003 10:52 am
Dawn, the tabs certainly overlap in NS6 and there are some minor formatting errors on the silverorange home page in NS6 too, which I think you were alluding to. Neither of these problems exist in NS7. Also, as I mentioned, the tabs were for a strictly internal system and I therefore only tested them for modern standards-compliant browsers. Anyone who uses them should understand they're not very backwards compatable. And, on the silverorange home page, the matter is purely esthetic, and we're not horribly concerned about the few people using NS6 as they can still easily access all of the information.
Dan - December 10, 2003 11:12 am
Lovely Tabs!
® - December 22, 2003 6:23 pm
I was curious to see Jerome's example of a scripted include. My project would also include editing a large number of pages to apply this as a navigational header.
So far my only solution is to create a number of headers to include (one for each main tab). It appears to be workable so far.
Any better ideas?
Naveed - January 3, 2004 6:23 pm
It's an excellent way of creating tabs using CSS. Very clean and simple. However, I was wondering if anyone could tell me how to resize the "width" of the tabs? Let's say, the title of one of the tabs is "Explore the party city, Toronto". It'd appear in two lines. Is there any way to increase the width of the tabs so that the title could be displayed in one line?
Thanks for help in advance!
Graham Sanders - February 4, 2004 6:32 am
Tabs don't work at all on a Mac running OS 9.2, nearly as bad as Jeffrey Zeldman's site, http://www.zeldman.com where the 4th tab all sorts of peculiar things happens ... anyone know of a tab navigation that works on a Mac using CSS ...
Chuck McKinnon - March 2, 2004 4:36 am
Hi Daniel,
I just did a "keeping porn, spam, and popup ads off your computer" presentation at my church last week. I was deluged with requests for more information, and needed a quick way to organize everything.
Your tab layout is brilliant, and I have used it without so much as modifying the style sheet (for the moment) in my haste to just get everything online. I've at least given you proper attribution on the homepage.
Thanks so much; I expect to be tweaking the style a bit in future, but for just being able to throw everything up on the web and bestow a coherent interface upon it, your tabs are second to none.
Chuck McKinnon
Calgary, AB
LazyJim - March 3, 2004 7:19 pm
I was going to mention that there's no need to fix the width of the tabs, or at least not in px. And I think this also answers Naveed's question.
If one of the tabs' content overflows, it goes on to 2 lines and a gap appears below the other tabs.
Simply removing the width restiction allows them to shrink/expand to their content.
If you want them to have uniform width, then I suggest either use % or em.
----
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-UK; rv:1.6) Gecko/20040206 Firefox/0.8
andrej - March 5, 2004 9:56 am
I've got similar tabs at http://www.jpd.sk/ site, but there is strange problem. The first page doesn't display text in main div correctly in MSIE 6. After going over tabs with mouse, the text in main div is displayed.
Strange.
Other pages display text after first load.
Suggestions?
--andrej
andrej - March 12, 2004 5:52 am
It's ok now, there was problem with height p element with embeded img element aligned to right. Really strange MSIE6 error.
Harry Potter - May 16, 2004 11:42 am
Paul O'B (a SitePoint member) gave me a solution to fix the problem in Opera. Just add width: 110px; to #tabs li
Sean :)
Shpolbder - May 25, 2004 4:16 pm
Nice tabs, Daniel, but I'd prefer more elegant solution on markup: nested lists, something like
...
<ul>
<li>item#1</li>
<li>item#2
<ul>
<li>subitem#1</li>
<li>subitem#2</li>
</ul>
</li>
<li>item#3</li>
</ul>
...
rather than <div id="tabs"><div id="subtabs"> solution.
Is it possible to do this way?
Daniel Burka - May 25, 2004 11:43 pm
Shpolbder: It's certainly possible to do it with nested lists and that's how I'd do it next time. I've got a number of ideas for improving these tabs signifantly that I might try and do soon. I'll post if I get it done.
Daniel Burka - May 26, 2004 6:06 pm
Thanks for all the feedback. I've made significant improvements to the way the tabs work and I started a new post about it. Please continue any discussion over there.