Animated tabbed content with jQuery
A lot of websites on the Internet have tabbed content now a days. The problem I find with most of them is that most of the time they can be quite dull. For my new looks I created a container which has the ability to switch content through tabs, but with an animation. This tutorial will show you how to create your own tabbed content step by step.
Download
Tabbed Content zip-archive
Example
View the Tabbed Content in action!
In this tutorial I am going to show you some web development techniques that can be used in your next projects. This will cover some CSS, HTML and jQuery tricks.
The sources of this tutorial are downloadable here: http://www.gayadesign.com/scripts/tabbed/tabbedContent.zip
Example of the outcome is found here: http://www.gayadesign.com/scripts/tabbed/
First thing we need is some basic HTML layout to fit what we are going to make.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Tabbed content</title> <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' /> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script> <link href='css/tabbedContent.css' rel='stylesheet' type='text/css' /> <script src="js/tabbedContent.js" type="text/javascript"></script> </head> <body> </body> </html>
I already included jQuery and other files in the head section. We’ll be making these files step by step in the next few minutes.
Next thing we need to do is create the structure of the document. What we need is a container with the tabs and a container which the content will that switch if we change tabs.
As a nice feature to enhance this all we’ll use a tab background that will move to the choice the user makes. While this tab moves, the content will also change to the selected tab.
For this we need a container containing the tabs and the background, a container containing the content and container that prevents the content to be shown prematurely.
Take a look at the following code:
<div class='tabbed_content'> <div class='tabs'> <div class='moving_bg'> </div> <span class='tab_item'> Tab one </span> <span class='tab_item'> Tab two </span> <span class='tab_item'> Tab three </span> <span class='tab_item'> Tab four </span> </div> <div class='slide_content'> <div class='tabslider'> <!-- content goes here --> </div> </div> </div>
It’s time to do a little styling to the tabs section and the overall container. Note that in the next part I am going to use an image which is included in the source archive. This will enhance the looks of the tabbed container.
This following CSS will make the tabs appear as tabs:
.tabbed_content {
background-color: #000000;
width: 620px;
}
.tabs {
height: 62px;
position: relative;
}
.tabs .moving_bg {
background-color:#7F822A;
background-image:url(../images/arrow_down_green.gif);
background-position: bottom left;
background-repeat: no-repeat;
left: 0;
padding: 15px;
padding-bottom: 29px;
position: absolute;
width: 125px;
z-index: 190;
}
.tabs .tab_item {
display: block;
float: left;
padding: 15px;
width: 125px;
color: #ffffff;
text-align: center;
z-index: 200;
position: relative;
cursor: pointer;
}
Note that the tab container has a position of relative to make the moving background position to it. Now we can easily move the moving background using the left property.
In the next part we are going to add the first few lines of Javascript to the tabbedContent.js file to create a mouseover effect on the tab items.
Use this code as a skeleton:
var TabbedContent = {
init: function() {
},
slideContent: function(obj) {
}
}
$(document).ready(function() {
TabbedContent.init();
});
This code is will execute the init function once the page is loaded.
Now we need to make is so that the moving background moves to the tab item which is hovered on. Implement the following code:
$(".tab_item").mouseover(function() {
var background = $(this).parent().find(".moving_bg");
$(background).stop().animate({
left: $(this).position()['left']
}, {
duration: 300
});
TabbedContent.slideContent($(this));
});
This will make all the items with the class tab_item behave as if it was a tab. It also moves the moving background to the right position, matching the left property with that of the tab.
TabbedContent.slideContent($(this)); will make the content switch in a few steps. We’ll get to that.
Next up is creating the content and it’s CSS. The content goes in the place we put .
<ul> <li> This matches the first tab </li> </ul> <ul> <li> This matches the second tab </li> </ul> <ul> <li> This matches the third tab </li> </ul> <ul> <li> This matches the fourth tab </li> </ul>
And the matching CSS:
.tabbed_content .slide_content {
overflow: hidden;
background-color: #000000;
padding: 20px 0 20px 20px;
position: relative;
width: 600px;
}
.tabslider {
width: 5000px;
}
.tabslider ul {
float: left;
width: 560px;
margin: 0px;
padding: 0px;
margin-right: 40px;
}
.tabslider ul a {
color: #ffffff;
text-decoration: none;
}
.tabslider ul a:hover {
color: #aaaaaa;
}
.tabslider ul li {
padding-bottom: 7px;
}
Note that the content has two containers. One is for the overall wrapping and the other for making the content move as we hover over the items.
The top container has an overflow of hidden, which makes any content that goes out of it’s limits hidden. The container below that will hold the content that will be hidden.
Now we are going to make the content scroll to the right position as we did with the tabs.
It’s time to fill up the slideContent function:
var margin = $(obj).parent().parent().find(".slide_content").width();
margin = margin * ($(obj).prevAll().size() - 1);
margin = margin * -1;
$(obj).parent().parent().find(".tabslider").stop().animate({
marginLeft: margin + "px"
}, {
duration: 300
});
The margin needed for the slider to move is calculated in this function. It has been made so that you can change the widths of several containers in the result, it will scroll to the right position automatically.
Take another looks at the source for references.
Good luck with making your own tabbed content in your future projects.
Articles like this one
41 Comments
-
Awesome man! I would make the area which determines the slider to move to be the <a> rather than the <div>. If content is too far over to the left then mouse could hit the next sections causing the content to change unwarranted.
Evan
-
Thanks for the comment Evan!
You have a point there. It would increase the usability of the whole concept. Thanks for sharing your thoughts.
-
Very cool! Though, what happens if the user has JavaScript turned off?
-
@Mike: I have no idea… I guess they wont switch :P
-
Hey! Very cool effect you have made. I really like content sliders.
Also going along with @mike If the JavaScript has been disabled then none of the tabs work.
Have a great day!
-tjefford
-
Thanks for the comment Tyler. Maybe the tabs should be clickable if Javascript is disabled.
-
coolllll…
wanna try it
thanks :D
-
Another uber kewl tutorial on GD :)
-
Great example and well executed, thanks for sharing.
-
@Neki, Farrhad and Peter:
Thanks for the comments and good luck with trying it out :D
-
The effect is super slick and pretty original, different from most tabs I have seen. Keep up this kind of material Gaya, I really enjoy it!
As for the flaw with JavaScript being disabled, you could try setting the overflow to hidden with JS and set the default CSS to scroll so the user could scroll through the content. Haven’t tested this, just a quick ide from a glance at the demo and code.
Great work!
-
Hi Drew!
Thanks for checking out the article and commenting! Much appreciated :D
As for the fix to the problem; it is a solution worth trying. Maybe even make the tabs scrollable with them. I sometimes wonder how many people don’t use Javascript these days.
-
Sweet tutorial :) Appreciate all the details.
-
No problem Hiro! Stick around for more ;)
-
Thanks for this work. This is great! Good work!
-
Thank Ahmet! Have fun with it!
-
Thanks for sharing this script, the idea is great. How about converting it into a jQuery plugin?
-
I might make a plugin in the near future :) stay tuned!
-
How do i make it animate when the click of the mouse is done instead of the mouseover function?
-
I´ve just solved this problem I have aked for help just by changing mouseover in the js code to mousedown and it worked perfectly
-
@raphael:
Good! jQuery is really that easy. Glad you liked it :)
-
Great stuff mate, nice to see someone this creative. Everything work like a charm, but in firefox there’s a problem when you insert the . Keep the great job.
-
sorry the image tag
-
Hi dtr,
Are you inserting the image tag inside a ul? that way it should work.
Good luck :)
-
thanks Gaya, it’s a great menu, it’s what i was looking for… i’m using it in my website and looks great
thanks for share it!!
PD: a have little question, when you use the menu and click on a tab link, when page reload, the slide button “.moving_bg” is allways in the first position not showing the new open page.
There is a way to remember the active page, so “.moving_bg” position match with the open page/category?thanks in advance!
adeux, from argentina
-
Looks really nice, just the kind of thing I was looking for thnx for the tut (y)
-
Hi. I think its not comfortable when content links located far away from his title.
-
really nice creative website design.. :)
-
Thanks for your gr8 work. it’s really gr8;
i have one question: can we use iframe under any tab? i tried but its not showing correctly, please check and update us with ur gr8 work :-) thanks!
SiD
-
Have you tried putting the iframe inside a list?
The script was made to move around ul tags. So try to do:
ul > li > iframe
good luck!
-
a very nice slider, simple, efficient, and no click !!!
check your slider here
much thanks from him
-
Hi, i’m trying this slider in my website but it’s not working… I followed every step of the instructions but it seems i’m missing something…
-
Hi, i’m trying to put this slider in my website but it’s not working… I followed every step of the instructions but it seems i’m missing something…Will you please tell me what did I missed.
-
@moabi: Looks cool dude! Glad you liked it :)
@khits: I see you are missing the jQuery file + the AnimatedTabs file gives a 404. Fix these first.
-
Thanks! I like it very, very much!!!
-
This is good stuff! Thank you for sharing. I have just one small problem – it works great with 4 tabs but when I try and extend it to 5 or 6 tabs the content stays withing the original 4 tab width no matter what I do to the content width. Would it be possible to have a few instructions on extending this to more than 4 tabs for those of us who are “CSS challenged”?
-
Wonderful little tool. Wow’d the boss.
I was having a problem displaying 12 tabs. After adding the 5th tab (I was testing as i added each one), they started to double up.
It took a few minutes to realize what was happening, the .tabslider in the css file was set to 5000px. Adding up the width of the tabs comes up to quite a bit more than 5000px, so upped it to 10000px and now it works just fine.
Thanks for the good work.
-
One problem I’m having, I have a couple of GridViews in seperate tabs, and one of the grids is larger than the other.
How would I make one tab display wider than the others??
-
I am interested in using this with the tabs lined up to the left of the content slider above each other. More like buttons than tabs.
Any ideas?
-
Really nice script. I am using in my site.
-
hi Gaya, no matter how much I try to put your animated tab into my blog, i can’t do it. Could you please look at my theme for me, and tell me what I did wrong. I am willing to donate to you if you can make your animated script work into my theme.
Recent comments