MyBB Hacks

MyBB Hacks > Coding > Tab Menu
Full Version: Tab Menu
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

Skiilz

01-19-2011, 05:36 AM
hey guys, I made this template but I can't get it to work....

HTML Code 
<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]

RateU

01-20-2011, 05:28 AM
(01-19-2011 05:36 AM)Skiilz Wrote: [ -> ]hey guys, I made this template but I can't get it to work....

HTML Code 
<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?

Skiilz

01-20-2011, 08:40 AM
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.

leefish

01-20-2011, 10:17 AM
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?

Skiilz

01-21-2011, 06:07 AM
Done. Thank you for your help.
I used this example: http://jqueryfordesigners.com/demo/tabs.html
MyBB Hacks > Coding > Tab Menu
Reference URL's