Simple CSS Tabs
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)
What is the bug in Safari? They look excellent here.
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.
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.
http://www.complexspiral.com/publications/rounding-tabs/
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
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.
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?
Thanks for help in advance!
Pintu
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
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
Strange.
Other pages display text after first load.
Suggestions?
--andrej
Sean :)
...
<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?
