jQuery Moving Tab and Sliding Content Tutorial

Written by Kevin Liew on 09 Sep 2009
263,052 Views • Tutorials

Introduction

We learn how to create a moving tab slide content in this tutorial. Basically, the tab section simulate Lava Lamp Effect, and the content is using animate method to slide it. I have two tutorials that focus on that two effects. Click on the following links if you're interested:

Lava Lamp Menu Tutorial

Right, like usual, I always like to separate the code into 3 sections - HTML, CSS and Javascript. For best practise, it's good to separate css, javascript from html code.

1. HTML

In the container #moving_tab, we have two sections in the HTML code - tabs class and content class. Tabs class contains 2 tabs, and content class contains 2 ul lists.

The following image illustrate the structure of this tutorial:

Moving Tab Chart
<div id="moving_tab">
	<div class="tabs">
		<div class="lava"></div>
		<span class="item">Tab 01</span>
		<span class="item">Tab 02</span>

	</div>
					
	<div class="content">						
		<div class="panel">						
			<ul>
				<li><a href='#'>Panel 01 Item 01</a></li>
				<li><a href='#'>Panel 01 Item 02</a></li>
				<li><a href='#'>Panel 01 Item 03</a></li>
				<li><a href='#'>Panel 01 Item 04</a></li>
				<li><a href='#'>Panel 01 Item 05</a></li>
			</ul>
			<ul>
				<li><a href='#'>Panel 02 Item 01</a></li>
				<li><a href='#'>Panel 02 Item 02</a></li>
				<li><a href='#'>Panel 02 Item 03</a></li>
				<li><a href='#'>Panel 02 Item 04</a></li>
				<li><a href='#'>Panel 02 Item 05</a></li>			
			</ul>						
		</div>

	</div>	
</div>

2. CSS

I have put comment in every important css style. Bear in mind that, if you change the width of #moving_tab, you might have to change the width value in .item, .lava, .panel, ul.

The rest of it like position:absolute and position:relative are important as well to set the layout, for the animation and layering. For more tips and tricks for CSS, check out the following posts

	body {
		font-family:arial;
		font-size:12px;	
	}
	
	a {
		color:#333;
		text-decoration:none;
		display:block;
	}

	a:hover {
		color:#888;
		text-decoration:none;
	}
	
	#moving_tab {
		/* hide overlength child elements*/
		overflow:hidden;
		
		/* all the child elements are refering to this width */
		width:300px;

		/* fix ie 6 overflow bug */
		position:relative
		
		/* styling */
		border:1px solid #ccc;	
		margin:0 auto;
	}
	
		#moving_tab .tabs {
			/* enable absolute position for .lava */
			position:relative;	
			height:30px;
			
			/* styling */
			padding-top:5px;
			cursor:default;
		}
	
		#moving_tab .tabs .item {
			/* enable z-index */
			position:relative;
			z-index:10;
		
			/* display in one row */
			float:left;
			display:block;

			/* width = half size of #moving_tab */
			width:150px;
			
			/* height = height of .tabs */
			text-align:center;
			font-size:14px;
			font-weight:700;	
		}

		#moving_tab .tabs .lava {
			/* Set it to absolute */
			position:absolute;
			top:0; left:0;
			
			/* display the lava in bottom most layer */
			z-index:0;		
				
			/* width = half size of #moving_tab */
			width:150px;

			/* height = height of .tabs */
			height:30px;
			
			/* styling */
			background:#abe3eb;

		}
		
		#moving_tab .content {
			/* enable absolute position for .panel */	
			position:relative;
			overflow:hidden;
			
			/* styling */
			background:#abe3eb;
			border-top:1px solid #d9fafa;
		}
		
		#moving_tab .panel {
			/* width is width of #moving_tab times 2 */
			position:relative;
			width:600px;
		}
		
		#moving_tab .panel ul {
			/* display in one row */
			float:left;
			
			/* width is the same with #moving_tab */
			width:300px;
			
			/* remove all styles */
			padding:0;
			margin:0;
			list-style:none;
			

		}
			/* styling */
			#moving_tab .panel ul li {
				padding:5px 0 5px 10px;	
				border-bottom:1px dotted #fff;
			}

3. Javascript

I learnt new trick in jQuery scripting - position() method. I have been using offset() method to calculate the position of elements, it's really hassle because the position:relative of elements can influence the value of offset.

This is the code I used to use:

  • $('#moving_tab').offset().left - $(this).offset().left + $(this).width()
and it can be replaced by:
  • $(this).position()['left']

Don't know why I couldn't find this method. But hey! it's something new and I'm excited. Anyway, the jQuery script is quite simple, we only have to animate lava class and panel.

	
$(document).ready(function () {

	//set the default location (fix ie 6 issue)
	$('.lava').css({left:$('span.item:first').position()['left']});
	
	$('.item').mouseover(function () {
	
		//scroll the lava to current item position
		$('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});
			
		//scroll the panel to the correct content
		$('.panel').stop().animate({left:$(this).position()['left'] * (-2)}, {duration:200});
	});
		
});

Conclusion

Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, buy me a drink in the bottom of the page or, just bookmark it and help me to spread this tutorial to the rest of the people who you think they are interested! :) Thanks!

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

20 comments
choen 15 years ago
nice, new variations tab
Reply
dlv 15 years ago
awesome as always kevin!
i visit your site almost every day...i found news jquery scrips always ! i love them !
Of course, you explain in a fancy way... clear and easy to understand, i'm glad about your daily work,
Also, thanks for share, i'm not tired to say

adeux, from argentina
Reply
jQueryGlobe 15 years ago
Nice animation.

btw, you can also use :
$(this).position().left
Reply
Ivan Mišić 15 years ago
Nice jQuery tutorial
Reply
Carolyn Mahlen 14 years ago
Hi. This is great! I have a question. Do you think you can explain to me how to do the tab system on twilightersanonymous.com ? I can\'t seem to figure it out. I want to use it for my site, but it doesn\'t make much sense.
Reply
asad 14 years ago
these are moving very fast do u make it slow
Reply
kevin Admin 14 years ago
Hi, you can set the duration to something higher. at the moment it\'s set to 200, try 1000 (1 second).
Reply
Tutorials 14 years ago
I found your site on a tutorial directory. We recently launched tutorialgrad.com. It’s similar to those other tutorial sites only easier for you. All you have to do is submit your RSS Feed once, we do the rest. We will check your feed for tutorials and post them daily, all with direct links to your site (we don’t frame your content). If you are interested please check it out and let us know what you think.
Reply
aqsa 14 years ago
Hi
very very nice thanks for sharing such a awesome tutorial.

aqsa
Reply
Rodger 14 years ago
Very cool! jQuery projects never ceases to amaze me.. Nice post.
Reply
tokat nakliyat 14 years ago
good code thanks
Reply
Jorge 13 years ago
simple and excellent. Thanks!!! +10
Reply
UnHa 13 years ago
Thank you so much!
However, I did have a bit trouble resizing it.
I wanted to make the width 150.. But when I tried to resize it, it didn't work out. Could someone help? Thanks
Reply