A new jQuery plugin tabSwitch which automate all the step to make a slide tabbed box and many other style of tabs.

There are so many kinds of tabbed menu nowadays. Still I really like the sliding effect (such as in Coda website). Luckily, thank to jQuery, we could reassembly this effect and trust me it only takes a few minutes (I’m not such a hard-working developer to write something longer then that). As the main tutorial is about Javascript with jQuery, so I will just move quickly through the CSS.

You will need a very basic knowledge about jQuery though, you could find out in jQuery homepage.

Ok, let start with the theory behind it. The main idea is you put all your tabs in a big div and put it inside a smaller div with overflow:hidden to hide the unused area.

Ok, the basic CSS is

.ContentFrame
{
    width: 400px; /* This is the size of area will actually display content */
    height:300px;
    overflow: hidden; /* To hide the big div */
}
.AllTabs
{
    width: 12000px; /* This should be the width  of TabContent * number of tab. */
    height: 250px;
    position:relative; /* Position should be relative so we could move it around */
    overflow: hidden;
}
.TabContent
{
    width: 400px; /* This is the side of each tab */
    height: 300px;
    float:left; /* make sure all tab will be in one single line */
}

Ok, I’m not so much of CSS so I think that’s all I could do . Let’s just move to JS.

Now add an event to every tab when the mouse click on it. Then calculate the size of each tab by sum up the width of the div with the margin of it. After we get the width, we multiply the the index of the tab and (–1). Then using jQuery anime to slide the big div to that position.

    $(".container .TabMenu span").click(function(){
     //Remove the exist selector
     $(".selector").removeClass("selector");
     //Add the selector class to the sender
     $(this).addClass("selector");

     //Find the width of a tab
     var TabWidth = $(".TabContent:first").width();
     if(parseInt($(".TabContent:first").css("margin-left")) > 0)
      TabWidth += parseInt($(".TabContent:first").css("margin-left"));
     if(parseInt($(".TabContent:first").css("margin-right")) >0)
      TabWidth += parseInt($(".TabContent:first").css("margin-right"));
     //But wait, how far we slide to? Let find out
     var newLeft = -1* $("span").index(this) * TabWidth;
     //Ok, now slide
     $(".AllTabs").animate({
      left: + newLeft + "px"
     },1000);
    });

That’s it. It’s simple right? Hope it would be useful for you.