Tab Navigation with Smooth Horizontal Sliding Using jQuery

In this tutorial I’ll show you how to create a navigation menu that slides horizontally. It begins with a set of “tabs” on the right side of a containing element. When clicked, a tab slides to the left to reveal a group of links. Click the tab again, and it slides back. While I’ve never had a need to build one of these for any of my own projects, quite a few people have asked if I would demonstrate how it might be done, so here goes.
Download
You can now download a .zip of complete, working demos featured in this post.
Demo
Tab Navigation

The Styles
For the navigation items, I used a simple unordered list wrapped in a <div class=”nav”>. While the HTML structure is straightforward, the CSS is a little tricky, so I’ll detail it here:

/* nav wrapper */
.tab-nav {
position: relative;
width: 610px;
overflow: hidden;
background: #ddd url(tab-slide.png) no-repeat 0 0;
}
/* nav */
.tab-nav ul {
position: relative;
float: left;
width: 1600px;
margin-left: 535px;
padding-left: 0;
list-style-type: none;
background-color: #fff;
}
.tab-nav li {
float: left;
clear: left;
}
.tab-nav a {
display: block;
width: 74px;
border-right: 1px solid #ddd;
height: 25px;
line-height: 24px;
float: left;
text-align: center;
text-decoration: none;
color: #000;
background:  url(tab-slide.png) no-repeat 2px -194px;
}
.tab-nav a.expanded {
background-position: 2px -244px;
}
/* second-level overrides */
.tab-nav ul ul {
float: left;
background-color: #333;
width: auto;
margin-left: 0;
}
.tab-nav li li {clear: none;}
.tab-nav li li a { color: #fff; width: 100px; background-image: none;}

Most of the relevant CSS here has to do with positioning the nav items. I set the top <ul>’s left margin to 75 pixels less than the wrapper’s width so that the top-level links appear on the right side. The 1600px width for the <ul> gives the floated list items ample room to line up horizontally next to each other.

The wrapper’s overflow declaration is significant, as it hides the list items when they’re sticking out to the right, but the rest is “window dressing.”
Sliding the Nav

With the nav looking the way I want it at its initial state, it’s time to make it do something. I’ll start with a simple setup, having each “tab” (top-level item) slide to the left on the first click to reveal its sub-nav items, and slide back to its initial position when it’s clicked a second time.

For this basic behavior, everything can be done inside a click handler for the top-level links. Note: Since I’m using multiple navs for this tutorial, each with its own set of behavior, I’ll be referring to them by ID, unlike in the CSS snippet above, where everything is styled by class. There is nothing special about the selectors or their naming here. Name your own elements and select them however you want.

The first thing to do is set a few variables. The $parentItem variable is the <li> parent of the clicked link. The slideAmt is the width of the nested <ul>, which is the next sibling of the link. And direction will eventually determine whether the parent <li> should be slid to the left or to the right.

var $topLinks1 = $(‘#tab-nav-1 > ul > li > a’);
$topLinks1.click(function() {
var $parentItem = $(this).parent(),
slideAmt = $(this).next().width(),
direction;
// code continues
});

Notice the use of $(this). Inside the click handler, this refers to the clicked DOM element. By wrapping this in $(), we can call jQuery methods on it.

To get the sliding motion to occur, we can animate either the left property or the marginLeft property. Here, I’ll animate marginLeft. So, the next thing to do is determine the direction of the animation based on the current value of marginLeft: If it’s less than 0, direction is set to “+=”, which increases it (back to 0); otherwise, direction is set to “-=”. At the same time, an “expanded” class will be toggled so that the arrow background image can change directions.

var $topLinks1 = $(‘#tab-nav-1 > ul > li > a’);
$topLinks1.click(function() {
var $parentItem = $(this).parent(),
slideAmt = $(this).next().width(),
direction;
if (parseInt($parentItem.css(‘marginLeft’), 10) <0) {
direction = ‘+=’;
$(this).removeClass(‘expanded’);
} else {
$(this).addClass(‘expanded’);
direction = ‘-=’;
}
// code continues
});

Finally, we do the animation, plugging in the direction and slideAmt variables. The return false; line stops the default click action from occurring. Here is the finished code for the basic implementation:

var $topLinks1 = $(‘#tab-nav-1 > ul > li > a’);
$topLinks1.click(function() {
var $parentItem = $(this).parent(),
slideAmt = $(this).next().width(),
direction;
if (parseInt($parentItem.css(‘marginLeft’), 10) <0) {
direction = ‘+=’;
$(this).removeClass(‘expanded’);
} else {
$(this).addClass(‘expanded’);
direction = ‘-=’;
}
$parentItem
.animate({marginLeft: direction + slideAmt}, 400);
return false;
});

from : http://www.learningjquery.com