jQuery Moving Tab and Sliding Content Tutorial

jQuery Moving Tab and Sliding Content Tutorial


jQuery Moving Tab and Sliding Content Tutorial

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!

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

19 comments

choen
Tue, 8th September 2009
nice, new variations tab Reply
dlv
Tue, 8th September 2009
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
Wed, 9th September 2009
Nice animation.

btw, you can also use :
$(this).position().left Reply
Ivan Mišić
Thu, 10th September 2009
Nice jQuery tutorial Reply
Carolyn Mahlen
Fri, 9th October 2009
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
Thu, 5th November 2009
these are moving very fast do u make it slow Reply
kevin Admin
Thu, 5th November 2009
Hi, you can set the duration to something higher. at the moment it\'s set to 200, try 1000 (1 second). Reply
Tutorials
Sat, 7th November 2009
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
Thu, 10th December 2009
Hi
very very nice thanks for sharing such a awesome tutorial.

aqsa Reply
Rodger
Tue, 29th December 2009
Very cool! jQuery projects never ceases to amaze me.. Nice post. Reply
tokat nakliyat
Sat, 14th August 2010
good code thanks Reply
Jorge
Thu, 26th May 2011
simple and excellent. Thanks!!! +10 Reply
UnHa
Mon, 15th August 2011
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
lokesh
Wed, 4th January 2012
Very nice tutorial... Reply
ehsan
Thu, 12th January 2012
nice . how to modify it for rtl direction languages. Reply
Terrance
Sun, 4th November 2012
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
Sun, 16th June 2013
非常好的教程,谢谢 Reply
i.t logo
Fri, 2nd May 2014
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
Mon, 28th July 2014
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

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement