How To: Create a Tabbed Box with YUI Tabs
Tabbed boxes are all the rage these days. Check out the “Explore” section on MSNBC, or the Premium News Theme to see how they can be used in a blog setting. I think it’s for a good reason. It allows you to add more content to a page with less clutter while engaging visitors to interact with the site. Plus it’s just kinda fun.
Note how these “tabbed boxes” work. They instantly change the content inside the box when you click a new tab — no loading from the server required. That is because the content for all the tabs is loaded when the page is loaded, but hidden away until the corresponding tab is clicked.
Using the Yahoo! UI Tab View, creating a tabbed box is really pretty easy. Here’s how:
1. Include the Javascript files on your page.
...
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/tabview/tabview-min.js"></script>
</head>
<body>
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("content-explorer");
</script>
...2. Add the markup for the box.
<div id="content-explorer">
<ul class="yui-nav">
<li class="selected"><a href="#">Articles</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Leprechaun</a></li>
</ul>
<div class="yui-content">
<div>
...
</div>
<div>
...
</div>
<div>
...
</div>
<div>
...
</div>
<div>
...
</div>
</div>
</div>Everything in this markup is important for this to work, including all the ID and class names for all the elements. Notice how there is four list items in the “yui-nav” and four divs in the “yui-content”, that is also important. Those should always equally correspond.
3. Style with CSS
#content-explorer {
padding-top: 20px;
width:100%;
line-height:normal;
}
#content-explorer ul {
padding: 10px 10px 0;
list-style: none;
max-width: 770px;
background: url(images/menu_bg.gif) bottom repeat-x;
height: 31px;
}
#content-explorer ul li {
float: left;
background: url(images/right.gif) right top no-repeat;
text-align: center;
overflow: hidden;
margin-left: 5px;
}
#content-explorer ul li a {
display: block;
background: url(images/left.gif) left top no-repeat;
padding: 10px 20px 6px 20px;
font-weight: bold;
color: #999;
}
#content-explorer ul li a:hover {
color: #990000;
}
#content-explorer ul li.selected {
background: url(images/right_cur.gif) right top no-repeat;
}
#content-explorer ul li.selected a {
background: url(images/left_cur.gif) left top no-repeat;
padding-bottom: 8px;
color: #990000;
}
div.yui-content {
overflow: auto;
border-bottom: 2px solid black;
border-right: 2px solid black;
border-left: 2px solid black;
padding: 20px;
}The CSS is completely up to you, there are no naming limitations like there was in the markup. Don’t worry about setting display values in there to hide the content of the different tabs, the Javascript will do that for you automatically.
To me, the really cool part about this is just how flexible all of this is. You can do whatever you can dream of inside those divs in the content area.
Loading ...
1
Nice! Thanks a lot for your efforts. The possibility to download a zip file with an example is just great! Keep it up!
Comment by el peatón — March 16, 2008 @ 10:13 am
2
I implemented domtabs and widgetized them, as well. There are great instructions for use here. It’s just a matter of dropping one .js file into your theme folder and styling. I’ve also seen a WordPress plugin (there are still some kinks, I think) for tabbed menus here.
Comment by Leanne — March 16, 2008 @ 11:20 am
3
My only comment - I use NoScript with Firefox, and so the YUI tabbed pane is not working properly. NoScript is very untrusting… ; )
The only problem is that anyone who has disabled Javascript, doesn’t have Javasctipt installed, etc. doesn’t see that’s the reason the tabs don’t work. I realize most people will have a noscript tag at the top to notify people of this - just an FYI. A lot of these tricks seem to have that notification pre-packaged, or some error / error message is readily evident. In this case, it wasn’t.
Either way, awesome trick!
Comment by Michael Schoonmaker — March 16, 2008 @ 12:12 pm
4
Nice article - one minor question Chris, why do you reference #content-explorer … and div.yui-content ? Why not reference them both fully (div#content-explorer, div.yui-content), as it would make reading back the CSS easier.
Comment by Lazlow — March 16, 2008 @ 12:34 pm
5
@Michael: I think if you are using a javascript blocker, you are already aware that you are potentially breaking all kinds of things on websites. But yeah, a noscript tag would probably be a really good idea!
@Lazlow: No particular reason there, just minor sloppiness.
Comment by Chris Coyier — March 16, 2008 @ 2:23 pm
6
Yahoo tabs look nice. But i think theres TO MUCH files to run 1 simple tab interface.
For example Adobe Spry Framework [Link] has the same type of widget [Link], same way of setting it up. And only uses 1 Javascript file, and 1 Css.. The less files, the less HTTP requests == faster loading
But than again, use what u think feels good for u.
Comment by V1 — March 17, 2008 @ 1:10 am
7
@V1 (& Leanne): All those links are very cool, thanks for sharing that. I should check out more of Adobe’s Spry stuff.
I know it does seem like FOUR javascript includes is a little much just for this simple tabbed box… I think YUI tries to work modularly so that if you use other parts of their UI, you’ll already be mostly set. Whereas, if there was just a single for each UI widget, each of those files might have a bunch of unnecessary repeated code.
Comment by Chris Coyier — March 17, 2008 @ 6:51 am
8
Ah, thanks for the reply Chris. Just presumed it might have a reason behind it!
Comment by Lazlow — March 17, 2008 @ 3:20 pm
9
this tabbed box is very nice. I stumbled upon the whole YUI thing, and that is very nice too!
One thing, the links fail to work in Netscape 7.1 on my windows machine. Any idea how to deal with that one?
Comment by James Schlesselman — March 17, 2008 @ 10:57 pm
10
A bit more on the Netscape thing…
I tested your two example sites “MSNBC” and “The Premium News Theme.”
MSNBC failed miserably, not only the tabbed box but other stuff went all to hell. the Premium… one worked perfectly no problems, looked right, links worked.
So, there is a way to make it work in Netscape 7.1 Do you know what it might be?
Or, am I just way behind the times and has consideration for this particular browser been discarded?
If so, what are the legacy browsers that you target. Is it the same as the YUI A-browser list?
thanks for your answers!
Comment by James Schlesselman — March 17, 2008 @ 11:17 pm
11
@James: I understand the need/desire for having everything on a webpage work for all possible browsers, but at some point a line needs to be drawn and I think Netscape 7.1 is beyond that line. Netscape 7.1 is two versions old now (9.0.0.6 is the most current version), and even that Netscape has officially ended support for. If a site with as large and diverse an audience as MSNBC has decided not to support it, that’s a good sign it’s not much of an issue anymore =)
I fairly sure there is no way to force this particular script to work in that old of a browser. I think the best idea would be to display a warning message using conditional stylesheets as well as a <noscript> tag warning.
Comment by Chris Coyier — March 18, 2008 @ 7:51 am
12
Is is possible to have a set height instead of auto height? Just like the width?
Thanks
CR
Comment by CR — March 19, 2008 @ 10:13 am
13
@CR: Sure, in the CSS for the div.yui-content, just set a height value. That would be fine if everything inside inside the box is images, but be careful if you are using text in there. Setting static heights for elements with text can lead to issues when users bump up text sizes.
Comment by Chris Coyier — March 19, 2008 @ 3:42 pm
14
Chris.. thanks for the quick answer.
Sorry, I’m not too good at this…. where exactly do I add this height value in the css? Is is somewhere close to….
#page-wrap {
width: 450px;
margin: 25px auto;
}
Regarding the text advise, wouldn’t it create the vertical and horizontal scroll bars automatically?
Thanks,
CR
Comment by CR — March 19, 2008 @ 9:05 pm
15
Actually it’s in the line starting here:
div.yui-content {
…
height: 200px;
…
}
If you want it to use scrollbars, it doesn’t do that automatically, but you could set the overflow value to “scroll” instead of “auto” like it is now. The reason it is set to auto right now is to “clear the float” of the menu items above.
Comment by Chris Coyier — March 20, 2008 @ 6:02 am
16
Thank you Sr…. very much!
I did left it as auto and and when the text is too long, the scroll bars show up so… that’s what I need.
Thanks again.
CR
Comment by CR — March 20, 2008 @ 3:12 pm
17
Eehm… maybe I am missing the point, but why use a big framework for this whil you can easely make this with a small javascript by your own? You can make those buttons by yourself and place some div’s under it and make them all invisible with display:none; and once you hit a button you can give a javascript-commando to turn the display on. Isn’t that a lot easier and lighter in stat of using a whole framework for this?
Comment by Edwin — March 21, 2008 @ 9:18 am