jQuery Moving Tab and Sliding Content Tutorial

Written by Kevin Liew on 09 Sep 2009
264,810 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
lokesh 13 years ago
Very nice tutorial...
Reply
ehsan 13 years ago
nice . how to modify it for rtl direction languages.
Reply
Terrance 12 years ago
Love this. I adapted it for 3 panels. One issue I have, but I don't think it's possible to adapt? Some kind of dynamic height so that the panel content height adjusts dynamically according to content for each individual panel. Why? I'm using it with a specific height to match another div's height, but one of the panel's content is too much and unfortunately then, the height of all the panels adjust accordingly. I've changed the overflow-y:scroll and kept the height fixed, but that's not the best solution. Any thoughts?
Reply
Zhou Lei 11 years ago
非常好的教程,谢谢
Reply
i.t logo 11 years ago
Wonderful web-site. Numerous practical facts right here. I am submitting it to a couple of associates ans on top of that giving around tasty. And obviously, thank you so much on the effort!
Reply
John Meng 10 years ago
Hi Kevin Liew, your tutorial is great. Inspired me a lot. I have questions on this query tutorial. Is it possible to use your cookie javascript with this "jQuery Moving Tab and Sliding Content"?
I mean is there any way to remember last selected class="item", till hover to other class="item"?
Reply
sudheer 9 years ago
thanks... such a nice premium gift.
Reply