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

17 comments

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

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