MyBB Central

Full Version: Tabbed Menù with Jquery
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
This amendment was written and edited by nhtera888xxx Joey_Pham.
This is a simple modification to add tabs to your categories. Here we go:

Demo: http://www.bestgamers.it

First you must download the attachment to the bottom of the guide, extract it and upload it to your host.
Phase 1
Go in forumbit_depth1_cat template and add the div tag:

Code:
Code:
<div id="cat_{$forum['fid']}" class="content">
.... (Template content) ...
</ Div>
Phase 2

Go in the index template and find:

Code:
Code:
{$ Forum}

Add before:

Code:
<script type="text/javascript" src="jscripts/jquery-1.3.2.min.js"> </ script>
<script type="text/javascript">
$. NoConflict ();
</ Script>
<script type="text/javascript">
jQuery (document). ready (function ($) {
$ ('. Tab'). Click (function () {
$ ('. At'). RemoveClass ('at');
$ (This). AddClass ('at');
$ ('. Content'). SlideUp ();
catshow var = $ (this). attr ('rel');
$ ('#' + Catshow). SlideDown ();
});
});
</ Code>
<table border="0" width="100%" class="tborder" cellpadding="4" cellspacing="0" style="margin-bottom: 3px;">
<tr align="center">
<td class="tcat at tab" title="Category 1" style="cursor: pointer;" rel="cat_1"> Category 1 </ td>
<td class="tcat tab" title="Category 4 & 6" style="cursor: pointer;" rel="cat_4, #cat_6"> Category 4 & 6 </ td>
<td class="tcat tab" title="Category 9" style="cursor: pointer;" rel="cat_9, #cat_11"> Category 9 </ td>
</ Tr>
</ Table>

NOTE: The "cat_1", "cat_4", "cat_6", "cat_9", "cat_11" were taken from the code phase of the div 1 above:

Code:
Code:
"Cat_ {$ forum ['fid']}"

And the numbers are 1,4,6,9,11 the ID of the categories that you want included in Table
Instead cat_1, cat_4, cat_9 are the main tabs that will be shown in the Index.

Add the code. Css to global.css:

Code:
Code:
. At {
background: # 026CB1 url (images / thead_bg.gif) top left repeat-x;
color: # ffffff;
}

# {Cat_4
display: none;
}

# {Cat_6
display: none;
}

# {Cat_9
display: none;
}

# {Cat_11
display: none;
}

(.. And continuing)

NOTE: You can hide all the Tab (actually not), except for Table 1 or the principal.
For example, the following code, cat_1 show, but the rest do not.

If you want to show or change a tab, add and remove the cat_1. Css for the card you want to show. For example I want to show cat_4, and then, I will have this code in my. Css:

Code:
Code:
. At {
background: # 026CB1 url (images / thead_bg.gif) top left repeat-x;
color: # ffffff;
}

# {Cat_1
display: none;
}

# {Cat_6
display: none;
}

# {Cat_9
display: none;
}

# {Cat_11
display: none;
}

Remember, just one of sceglire. Main css to make it visible.

Now, I will choose the same. Cat_1 using css, and cat_4 cat_9, because they are the ones I have chosen before.
Then change the code that I inserted in the Index:

Code:
Code:
<table border="0" width="100%" class="tborder" cellpadding="4" cellspacing="0" style="margin-bottom: 3px;">
<tr align="center">
<td class="tcat at tab" title="Category 1" style="cursor: pointer;" rel="cat_1"> Category 1 </ td>
<td class="tcat tab" title="Category 4 & 6" style="cursor: pointer;" rel="cat_4, #cat_6"> Category 4 & 6 </ td>
<td class="tcat tab" title="Category 9" style="cursor: pointer;" rel="cat_9, #cat_11"> Category 9 </ td>
</ Tr>
</ Table>

with this:

Code:
Code:
<table border="0" width="100%" class="tborder" cellpadding="4" cellspacing="0" style="margin-bottom: 3px;">
<tr align="center">
<td class="tcat tab" title="Category 1" style="cursor: pointer;" rel="cat_1"> Category 1 </ td>
<td class="tcat at tab" title="Category 4 & 6" style="cursor: pointer;" rel="cat_4, #cat_6"> Category 4 & 6 </ td>
<td class="tcat tab" title="Category 9" style="cursor: pointer;" rel="cat_9, #cat_11"> Category 9 </ td>
</ Tr>
</ Table>

That's all.

Download: Click here to Download