logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 10-08-2011, 10:43 AM   #1
tony09uk
 
Join Date: Oct 2010
Posts: 340
Default tab menu

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
tony09uk is offline   Reply With Quote
Old 10-08-2011, 07:49 PM   #2
ranjan
 
Join Date: Dec 2004
Posts: 405
Default Quick and dirty plugin

Wrote a quick and dirty plugin

http://jsbin.com/oyaned

click edit in jsbin to see the code
ranjan is offline   Reply With Quote
Old 10-10-2011, 09:33 AM   #3
tony09uk
 
Join Date: Oct 2010
Posts: 340
Default

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.
tony09uk is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:56 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com