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="//yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="//yui.yahooapis.com/2.5.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="//yui.yahooapis.com/2.5.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="//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.
Nice! Thanks a lot for your efforts. The possibility to download a zip file with an example is just great! Keep it up!
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.
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!
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.
@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.
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.
@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.
Ah, thanks for the reply Chris. Just presumed it might have a reason behind it!
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?
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!
@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.
Is is possible to have a set height instead of auto height? Just like the width?
Thanks
CR
@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.
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
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.
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
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?
Hi, great mod. I’ve implemented this on my website but it sometimes takes a long time to load, it looks as though it’s waiting for the whole page to load before it’s implemented so if you have an ad or image that takes a while to load, so does this mod.
Is there a way to get it to load first?
Also how would I add the NoScript talked about in other posts?
Thanks, Steven
I am curious about the demo that downloads. The web page has a link to two style sheets, style.css and tabs.css. There is only one sheet, style.css, included in the download. The demo works, though. What is in the missing sheet?
Hi
i am using these tab box ….having some problem…..
i want to use these tab box more then one place …in web page…
like on upper portion and lower portion.
upper tab box work ok in IE7 but ……..lower lower tab box is not working properly…please help……
so question is this can we use ….use this tab box more then one in ……single web page..
please help
thanks
Hi All
iam facing the problem with YUI tabs, my jsp page containg few YUI
tabs which can have the content as pdf…
–> first and second tabs contains pdf content, if i navigate from
first to second tab the content is showing properly, if i again
go back to first tab the jsp page is hanging and it is not
showing the pdf content , can anyone please let me know the
possibilities which iam going wrong..
it is working very fine with IE 7.x , chrome browsers but not in fiefox.
here is the code :
var tabView = new YAHOO.widget.TabView(‘demo’);
Example 1
Browser News
Tab One Label
Tab Two Label
Tab Three Label
<div><iframe id='webtabsframe' src='http://files.voicecurve.com/arcadian/arkansas/fayetteville/fayetteville - fort smith auth form.pdf' height="100%" width="100%"></iframe></div>
<div><p>Tab Three Content</p></div>
</div>
</div>
Is the download different that the demo? It seems that one has to change style.css .content-explorer height:31 to height:39 to make it work properly…
Any easy way to make the tabs right aligned? adding a float:right to #content-explorer ul li changes the tab order, and #content-explorer ul float:right results in the background repeated image to no longer stretch the entire length of the box.