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:

• Sliding Tab Menu for Sidebar 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:

<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

• 15 CSS TIps and Tricks
• 15 Ways to Optimize CSS and Reduce CSS File Size

	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()

• $(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!

• TAGS:
• CSS
• HTML
• Javascript
• jQuery
• Tutorial