PDA

View Full Version : tab menu


tony09uk
10-08-2011, 10:43 AM
I am now trying to make a tab based menu. I have played around with a few tutorials that have taught some bits and pieces of jquery but I haven't been able to find anything that is a course as such so I am trying to create a menu that I have in mind for my website.

This menu will a have varying number of tabs, each with a different heading - lets call the headings 1,2,3,4,5,6 and lets assume we start at 1.
I would like to click on two and the left border slide to the right, click on three and the left border slide to the right and so on each time you ascend in the sequence. Then the when you descend I want the right border to slide to the left.

So far I have managed to create the tab menu, but I haven't been able to work out how I create the desired sliding effect.

The below code is what I found and tried to play with:

$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});

});

im guessing a toggle command needs to go into the activeTab variable, I have looked through jquery and tried a couple of things but with no success. I know copy and paste is not an ideal way to lean, but as I haven't been able to find any courses that are any good I am trying to learn by using a set script and modifying it then moving onto making my own as I recognise more of what is going on

I know finding and copying code is not the real way to learn, but

ranjan
10-08-2011, 07:49 PM
Wrote a quick and dirty plugin

http://jsbin.com/oyaned

click edit in jsbin to see the code

tony09uk
10-10-2011, 09:33 AM
thats great. Thankyou very much! I will study the code to try and learn how you have done it. I hope you dont mind if I come back to you with some questions to clarify parts i dont understand.