...

View Full Version : How Do I Create Tabs



Technique
10-02-2006, 07:36 PM
I need help creating tabs for my website. I was looking at http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm and needed help customizing it in some way...mainly the look. Even better, I was wondering if someone can show me how to do it from scratch so that it is fully customizable.

Thanks.

rlemon
10-02-2006, 09:02 PM
I need help creating tabs for my website. I was looking at http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm and needed help customizing it in some way...mainly the look. Even better, I was wondering if someone can show me how to do it from scratch so that it is fully customizable.

Thanks.


Ok, well there are multiple approaches you can take depending on the amount of content in each tab area...

For Example: if you have tonnes of content and wany your main navigation to be tabs you may want to ajax the content in... or, if you have small enough content you can place it all on the page as is.

OR

you can create a seriese of pages that look like tabs but just navigate the entire page.

i.e. you have two pages, pageone and pagetwo.

both have the tabs hard coded in with the current page selected (hard coded) when you 'switch' tabs, simply navigate to the new page where the 'tab' is 'styled' to be selected.

Technique
10-02-2006, 09:49 PM
I'm looking for something more like the tabs here: http://www.teamxbox.com/...under the news heading.

Technique
10-03-2006, 12:39 AM
Anybody have any idea?

Erindesign
10-03-2006, 01:48 AM
I don't know if this is the right way, but certainly works. I'm using tables because I suck at divs but feel free to use divs if u want.


HTML:
<div align=center>
<table class=table>
<tr>
<div class=bck>
<td class=menuitem>
<a href=page.html>Link 1</a>
</td>
<td class=menuitem>
<a href=page.html>Link 2</a>
</td>
<td class=menuitem>
<a href=page.html>Link 3</a>
</td>
<td class=menuitem>
<a href=page.html>Link 4</a>
</td>
</div>
</tr>
</table>
</div>



CSS:
.table{
width:400px;
}

.bck{
width:400px;
background: url(your-main-bck-for-all-of-the-links.gif);
}

.menuitem a:link{
width:100px;
display: table;
}

.menuitem a:visited{
width:100px;
display: table;
}

.menuitem a:hover
{
width:100px;
display: table;
background: url(mathcing-bck-as-the-content.gif); << You want this image to fade in or be same color as background of the content so it looks like its part of it.
}
.menuitem a:active
{
width:100px;
display: table;
background: url(mathcing-bck-as-the-content.gif); << You want this image to fade in or be same color as background of the content so it looks like its part of it.
}


.menuitem a:hover background will change when u put mouse over link.
.menuitem a:active background will change when link is selected so it looks selected.


Didn't try it but should work.


EDIT: OF COURSE YOU CAN ADD YOUR OWN TOUCHES LIKE TEXT COLOR AND WHATNOT TO THE CSS SO THE LINKS DONT LOOK LIKE CRAPPERS!

rlemon
10-03-2006, 01:56 AM
ok seriously, not too sound rude.. but if thats all you wanted why not just search google??

i ran "javascript tab content"

and on the first page found almost all were usable scripts..

for example...

http://www.google.ca/search?q=javascript+tab+content&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:en-US:official

second hit

http://www.javascriptkit.com/script/script2/contenttabs.shtml

Erindesign
10-03-2006, 02:01 AM
ok seriously, not too sound rude.. but if thats all you wanted why not just search google??

I never learn by using scripts unless it's like a php news script and I mess with it so much to get it what I want it to do that i could slap a copyright on it and call it mine without any legal issues. My way is easier and certainly no javascript and whatnot. It's the poor, thinking man's way of doing things. I said its not the best way of doing it but still works. Not too hard to understand unlike the javascripts.

Anyway, yeah theres thousands and thousands of them out there.

Technique
10-03-2006, 03:08 AM
Thanks, I appreciate you both helpin me out.

rlemon
10-03-2006, 02:23 PM
I never learn by using scripts unless it's like a php news script and I mess with it so much to get it what I want it to do that i could slap a copyright on it and call it mine without any legal issues. My way is easier and certainly no javascript and whatnot. It's the poor, thinking man's way of doing things. I said its not the best way of doing it but still works. Not too hard to understand unlike the javascripts.

Anyway, yeah theres thousands and thousands of them out there.

The idea is not to cut and paste. the idea is to learn a the different techniques on how to acheive the affect then build your own.

he's not going to learn any more from you that we wouldn't learn by reading a few of these pages..
and if he just copy and pastes your code in there then he still can't slap a copyright on it now can he?

i'm not flaming your responce, i appreciate people helping all they can.. i was just saying to him that he should take a little time and see some examples already posted..
it's just easier if someone attempts the script on their own first..

Technique
10-03-2006, 03:30 PM
No, that's what I was going to do. I just wanted a very basic script so that I could put my own work into it later.

rlemon
10-03-2006, 03:31 PM
No, that's what I was going to do. I just wanted a very basic script so that I could put my own work into it later.


exactly, search google. there are thousands.

"Javascript tab content" is the search term.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum