MyBB Hacks / Coding / Tab Menu

 Tab Menu
Skiilz Offline
Member
***
Posts: 198
Joined: Nov 2010
Post: #1
Tab Menu
hey guys, I made this template but I can't get it to work....

HTML Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
 
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
</head>
<body>
{$header}
<if $GLOBALS['mybb']->user['uid'] == $memprofile['uid'] then>
<div align="right"><a href="{$mybb->settings['bburl']}/usercp.php"><img src="{$mybb->settings['bburl']}/images/editprofile.png" alt="Edit My Profile" /></a></div>
<br />
<else>
</if>
<table width="100%" cellspacing="0" cellpadding="4" border="0" align="center">
<tr>
<td style="width: 270px;" valign="top">
<table border="0" cellspacing="0" cellpadding="4" class="tborder">
<tr>
<td class="thead" colspan="2"><strong>{$memprofile['username']}'s Statistics</strong></td>
</tr>
<tr>
<td class="trow2"><center>{$avatar}</center></td>
</tr>
<tr>
<td class="thead" colspan="2"><strong></strong></td>
</tr>
<tr>
<td class="trow1">
<center>({$usertitle})<br />
{$groupimage}
{$userstars}</center>
</td>
</tr>
<tr>
<td class="thead" colspan="2"><strong></strong></td>
</tr>
<tr>
<td class="trow1">
<strong>{$lang->postbit_status}</strong> {$online_status}
{$warning_level}
</td>
</tr>
<tr>
<td class="thead" colspan="2"><strong></strong></td>
</tr>
<tr>
<td class="trow1">
<strong>{$lang->joined}</strong> {$memregdate}
<br /><strong>{$lang->lastvisit}</strong> {$memlastvisitdate} {$memlastvisittime}
<br /><strong>{$lang->timeonline}</strong> {$timeonline}
<br /><strong>{$lang->date_of_birth}</strong> {$membday} {$membdayage}<br />
<strong>{$lang->local_time}</strong> {$localtime}<br />
</td>
</tr>
<tr>
<td class="thead" colspan="2"><strong></strong></td>
</tr>
</tr>
<td class="trow1">
{$newpoints_profile}
{$newpoints_bank_profile}
{$newpoints_shop_profile}
{$award_box}
</td>
</tr>
<!-- Start Mood !-->
<tr>
<td class="thead" colspan="2"><strong></strong></td>
</tr>
<tr>
<td class="trow1">
<if $userfields['fid7'] != '' then>
<if $GLOBALS['mybb']->user['uid'] == $memprofile['uid'] then>
<center><a href="javascript:;" onclick="MyBB.popupWindow('MyMood.php', 'imcenter', 450, 300);"><img src="images/MyMood/<?=str_replace(' ', '', $userfields['fid7'])?>.gif" alt="MMood" title="Click to change your Mood." valign="middle" /></a></center>
<else>
<center><img src="images/MyMood/<?=str_replace(' ', '', $userfields['fid7'])?>.gif" alt="MyMood" title="{$memprofile['username']}'s Mood" valign="middle" /></center>
</if>
<else>
<center>No Mood Selected</center>
</if>
</td>
</tr>
<!-- End Mood !-->
<tr>
<td class="thead" colspan="2"><strong></strong></td>
</tr>
</table>
</td>
<td valign="top">
<!------------- START TOP PROFILE SUMARY ------------->
<table width="100%" cellspacing="0" cellpadding="4" border="0" align="center">
<tr>
<td class="thead" colspan="2"><strong>{$memprofile['username']}'s Profile</strong></td>
</tr>
<tr>
<td class="trow1" valign="middle" align="center">
<span class="largetext">{$memprofile['username']}</span>
<br />
<span>{$usertitle}</span><br />
<span>{$userstars}</span><br />
<span>{$groupimage}</span><br />
<a href="#"><span>Send PM</span></a>
&nbsp;&nbsp;-&nbsp;&nbsp;<a href="search.php?action=finduserthreads&amp;uid={$memprofile['uid']}" title="Find All Threads by {$memprofile['username']}"><span>View All Threads</span></a>
&nbsp;&nbsp;-&nbsp;&nbsp;<a href="search.php?action=finduser&amp;uid={$memprofile['uid']}" title="Find All Posts by {$memprofile['username']}"><span>View All Posts</span></a>
</td>
</tr>
<tr>
<td class="thead" colspan="2"><strong></strong></td>
</tr>
</table>
<!------------- START TABBED MENU ------------->
<br />
<center>
<a href="#Information" class="button style1"><span>Information</span></a>
<a href="#Contact" class="button style1"><span>Contact</span></a>
<a href="#Moderator" class="button style1"><span>Moderator</span></a>
<a href="#YouTube" class="button style1"><span>YouTube</span></a>
<a href="#Status" class="button style1"><span>Status</span></a>
</center>
<br />
<!------------- TAB CONTENT ------------->
<table width="100%" cellspacing="0" cellpadding="4" border="0" align="center">
<tr>
<td class="thead" colspan="2"><strong>Selected Tab Name</strong></td>
</tr>
<tr>
<td class="trow1" valign="middle" align="center">
CONTENT HERE
</td></tr>
<tr>
<td class="thead" colspan="2"><strong></strong></td>
</tr>
</table>
</td>
</table>
{$footer}
</body>
</html>


Can someone help me with the JQuery, effects and variables that I need to add to make this menu works?
here is how it looks like.. (in my opinion it is pretty good, I just need to make it work as a tabbed menu Biggrin)
[Image: 43300288.png]

[Image: 468x602b.png]
(This post was last modified: 01-19-2011 05:37 AM by Skiilz.)
01-19-2011 05:36 AM
Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #2
RE: Tab Menu
(01-19-2011 05:36 AM)Skiilz Wrote:  hey guys, I made this template but I can't get it to work....

HTML Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
 
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
</head>
<body>
{$header}
<if $GLOBALS['mybb']->user['uid'] == $memprofile['uid'] then>
<div align="right"><a href="{$mybb->settings['bburl']}/usercp.php"><img src="{$mybb->settings['bburl']}/images/editprofile.png" alt="Edit My Profile" /></a></div>
<br />
<else>
</if>
<table width="100%" cellspacing="0" cellpadding="4" border="0" align="center">
<tr>
<td style="width: 270px;" valign="top">
<table border="0" cellspacing="0" cellpadding="4" class="tborder">
<tr>
<td class="thead" colspan="2"><strong>{$memprofile['username']}'s Statistics</strong></td>
</tr>
<tr>
<td class="trow2"><center>{$avatar}</center></td>
</tr>
<tr>
<td class="thead" colspan="2"><strong></strong></td>
</tr>
<tr>
<td class="trow1">
<center>({$usertitle})<br />
{$groupimage}
{$userstars}</center>
</td>
</tr>
<tr>
<td class="thead" colspan="2"><strong></strong></td>
</tr>
<tr>
<td class="trow1">
<strong>{$lang->postbit_status}</strong> {$online_status}
{$warning_level}
</td>
</tr>
<tr>
<td class="thead" colspan="2"><strong></strong></td>
</tr>
<tr>
<td class="trow1">
<strong>{$lang->joined}</strong> {$memregdate}
<br /><strong>{$lang->lastvisit}</strong> {$memlastvisitdate} {$memlastvisittime}
<br /><strong>{$lang->timeonline}</strong> {$timeonline}
<br /><strong>{$lang->date_of_birth}</strong> {$membday} {$membdayage}<br />
<strong>{$lang->local_time}</strong> {$localtime}<br />
</td>
</tr>
<tr>
<td class="thead" colspan="2"><strong></strong></td>
</tr>
</tr>
<td class="trow1">
{$newpoints_profile}
{$newpoints_bank_profile}
{$newpoints_shop_profile}
{$award_box}
</td>
</tr>
<!-- Start Mood !-->
<tr>
<td class="thead" colspan="2"><strong></strong></td>
</tr>
<tr>
<td class="trow1">
<if $userfields['fid7'] != '' then>
<if $GLOBALS['mybb']->user['uid'] == $memprofile['uid'] then>
<center><a href="javascript:;" onclick="MyBB.popupWindow('MyMood.php', 'imcenter', 450, 300);"><img src="images/MyMood/<?=str_replace(' ', '', $userfields['fid7'])?>.gif" alt="MMood" title="Click to change your Mood." valign="middle" /></a></center>
<else>
<center><img src="images/MyMood/<?=str_replace(' ', '', $userfields['fid7'])?>.gif" alt="MyMood" title="{$memprofile['username']}'s Mood" valign="middle" /></center>
</if>
<else>
<center>No Mood Selected</center>
</if>
</td>
</tr>
<!-- End Mood !-->
<tr>
<td class="thead" colspan="2"><strong></strong></td>
</tr>
</table>
</td>
<td valign="top">
<!------------- START TOP PROFILE SUMARY ------------->
<table width="100%" cellspacing="0" cellpadding="4" border="0" align="center">
<tr>
<td class="thead" colspan="2"><strong>{$memprofile['username']}'s Profile</strong></td>
</tr>
<tr>
<td class="trow1" valign="middle" align="center">
<span class="largetext">{$memprofile['username']}</span>
<br />
<span>{$usertitle}</span><br />
<span>{$userstars}</span><br />
<span>{$groupimage}</span><br />
<a href="#"><span>Send PM</span></a>
&nbsp;&nbsp;-&nbsp;&nbsp;<a href="search.php?action=finduserthreads&amp;uid={$memprofile['uid']}" title="Find All Threads by {$memprofile['username']}"><span>View All Threads</span></a>
&nbsp;&nbsp;-&nbsp;&nbsp;<a href="search.php?action=finduser&amp;uid={$memprofile['uid']}" title="Find All Posts by {$memprofile['username']}"><span>View All Posts</span></a>
</td>
</tr>
<tr>
<td class="thead" colspan="2"><strong></strong></td>
</tr>
</table>
<!------------- START TABBED MENU ------------->
<br />
<center>
<a href="#Information" class="button style1"><span>Information</span></a>
<a href="#Contact" class="button style1"><span>Contact</span></a>
<a href="#Moderator" class="button style1"><span>Moderator</span></a>
<a href="#YouTube" class="button style1"><span>YouTube</span></a>
<a href="#Status" class="button style1"><span>Status</span></a>
</center>
<br />
<!------------- TAB CONTENT ------------->
<table width="100%" cellspacing="0" cellpadding="4" border="0" align="center">
<tr>
<td class="thead" colspan="2"><strong>Selected Tab Name</strong></td>
</tr>
<tr>
<td class="trow1" valign="middle" align="center">
CONTENT HERE
</td></tr>
<tr>
<td class="thead" colspan="2"><strong></strong></td>
</tr>
</table>
</td>
</table>
{$footer}
</body>
</html>


Can someone help me with the JQuery, effects and variables that I need to add to make this menu works?
here is how it looks like.. (in my opinion it is pretty good, I just need to make it work as a tabbed menu Biggrin)


I can't see any jQuery / javascript there?
01-20-2011 05:28 AM
Find all posts by this user Quote this message in a reply
Skiilz Offline
Member
***
Posts: 198
Joined: Nov 2010
Post: #3
RE: Tab Menu
Yes that's my issue. I can't figure out how to put one there to make the tab menu work with the exactly layout of the image.
[Image: 468x602b.png]
(This post was last modified: 01-20-2011 08:41 AM by Skiilz.)
01-20-2011 08:40 AM
Find all posts by this user Quote this message in a reply
leefish Offline
Hamster
*****
Posts: 1,009
Joined: Apr 2010
Post: #4
RE: Tab Menu
Have you tried this code?

http://community.mybb.com/thread-62039.html

Its the same thing as we used in other profile/tab set ups. You see how the area you click to open the tab does not HAVE to be connected to the tab area?

[Image: leelink.gif]
MYBB1.6 & XThreads
01-20-2011 10:17 AM
Visit this user's website Find all posts by this user Quote this message in a reply
Skiilz Offline
Member
***
Posts: 198
Joined: Nov 2010
Post: #5
RE: Tab Menu
Done. Thank you for your help.
I used this example: http://jqueryfordesigners.com/demo/tabs.html
[Image: 468x602b.png]
(This post was last modified: 01-21-2011 06:51 AM by Skiilz.)
01-21-2011 06:07 AM
Find all posts by this user Quote this message in a reply

« Next Oldest | Next Newest »

Threaded Mode | Linear Mode
 Standard Tools
Forum Jump:



Contact Us | MyBB Hacks | Return to Top | Return to Content | Lite (Archive) Mode | RSS Syndication