منوی تب دار

با استفاده از این جی کوئری می توانید یک منو تب دار ایجاد کنید

آموزش استفاده

1-کد HTML

<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

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-  Js

$(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});
	});

});