NJAquaman
02-03-2010, 10:00 PM
What: A Nav Tab Plugin to Add a Main Tab to the Nav Bar with its own connective Sub Tab
Menu. When you Click the Main tab it brings Up it own Sub Nav Tab Menu . Click it again to
Hide the Sub Tab Menu For that Main Tab.
WORKS WITH ..!!!
4.0.x
Browser Comparability (All Latest Versions);
Internet Explorer
Firefox
Opera
Safari
Google Chrome
Install:
1) Navigate to ACP> Plugins & Products > Add New Plugin
2) Product : vbulletin
Hook Location : parse_templates
Title : Main Nav Tab with Sub
Execution Order : 5
Plugin is Active : Yes
3) Insert the Code;
For Tabs On the Right Side Use This Code:
$template_hook['navtab_end'] .= '
<!-- MAIN TAB -->
<li class="na" onclick="this.className=this.className==\'na\'? \'selected\' : \'na\';">
<a href="javascript://" class="navtab" onclick="document.getElementById(\'sub1\').style.display=(d ocument.getElementById(\'sub1\').style.display==\' block\')?\'none\':\'block\';"> Search Engines </a>
</li>
<!-- SUB TABS -->
<ul class="floatcontainer" id="sub1" style="display:none;background-color:#000000;position:absolute;z-index:1;" >
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.bing.com">Bing</a></li>
<li class="popupmenu" >
<a href="javascript://" class="popupctrl">Weather</a>
<font color="#000000">
<div class="popupbody">
<li ></li>
<li><a href="list.php?r=category/46-Birding">Birding</a></li>
<li><a href="list.php?r=category/47-Boating">Boating</a></li>
</div>
</font>
</li>
</ul>
';
For Tabs in the Middle Use This Code:
$template_hook['navtab_middle'] .= '
<!-- MAIN TAB -->
<li class="na" onclick="this.className=this.className==\'na\'? \'selected\' : \'na\';">
<a href="javascript://" class="navtab" onclick="document.getElementById(\'sub1\').style.display=(d ocument.getElementById(\'sub1\').style.display==\' block\')?\'none\':\'block\';"> Search Engines </a>
</li>
<!-- SUB TABS -->
<ul class="floatcontainer" id="sub1" style="display:none;background-color:#000000;position:absolute;z-index:1;" >
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.bing.com">Bing</a></li>
<li class="popupmenu" >
<a href="javascript://" class="popupctrl">Weather</a>
<font color="#000000">
<div class="popupbody">
<li ></li>
<li><a href="list.php?r=category/46-Birding">Birding</a></li>
<li><a href="list.php?r=category/47-Boating">Boating</a></li>
</div>
</font>
</li>
</ul>
';
For Tabs On the Left Side Use This Code:
$template_hook['navtab_start'] .= '
<!-- MAIN TAB -->
<li class="na" onclick="this.className=this.className==\'na\'? \'selected\' : \'na\';">
<a href="javascript://" class="navtab" onclick="document.getElementById(\'sub1\').style.display=(d ocument.getElementById(\'sub1\').style.display==\' block\')?\'none\':\'block\';"> Search Engines </a>
</li>
<!-- SUB TABS -->
<ul class="floatcontainer" id="sub1" style="display:none;background-color:#000000;position:absolute;z-index:1;" >
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.bing.com">Bing</a></li>
<li class="popupmenu" >
<a href="javascript://" class="popupctrl">Weather</a>
<font color="#000000">
<div class="popupbody">
<li ></li>
<li><a href="list.php?r=category/46-Birding">Birding</a></li>
<li><a href="list.php?r=category/47-Boating">Boating</a></li>
</div>
</font>
</li>
</ul>
';
4) "sub1" is the unique name for that Tab set . To duplicate
you must change the "sub1" to "sub2" . For another Tab change it to "sub3" , ect ect .
You must change this in three Spots in the code. (Highlighted in Red)
5) "Search Engines" is the Main Tab Name .
This will Be Selected When Clicked. (Highlighted in Green)
6) "Google" , "Yahoo", or "Bing" is the Sub tab names to duplicate and
make another Sub Tab Just copy the Line of Code (Highlighted in Orange)
7) There is Also a Sub Tab Menu Drop Down Code That you can Duplicate
(Highlighted in Purple)
7) To change the Color of the background of the Sub Nav
Change the Hex color "#000000" to What ever you like (Highlighted in Blue)
8) Save , Now you Have a Main Nav Tab With connective Sub Tab Menu!
Notes:
- YOU MAY Duplicate it in the same Plugin
- You can use both Left , Middle , and Right codes at the same time!
- Make Sure you change the unique name in step 4 when duplicating a tab
- You may Duplicate Unlimited sub tabs in the same code
Screen Shot!
Not Selected ;
111643
Clicked Tab and now selected;
111644
DONT FORGET TO CLICK INSTALL (https://vborg.vbsupport.ru/vborg_miscactions.php?do=installhack&threadid=235005)
__________________________________________________ ______________
Change Log
v1.1 - 02/04/10
- Connected to a Single Main Tab (Seelter) (https://vborg.vbsupport.ru/showpost.php?p=1972737&postcount=38)
__________________________________________________ _____________
Here Are Some Other Versions:
Main Nav Tab (https://vborg.vbsupport.ru/showthread.php?t=232254)
Main Nav Tab Drop Down (https://vborg.vbsupport.ru/showthread.php?t=232134)
[CMS] Sub Nav Tabs (https://vborg.vbsupport.ru/showthread.php?t=232265)
[CMS] Sub Nav Tabs Drop Down (https://vborg.vbsupport.ru/showthread.php?t=232268)
Menu. When you Click the Main tab it brings Up it own Sub Nav Tab Menu . Click it again to
Hide the Sub Tab Menu For that Main Tab.
WORKS WITH ..!!!
4.0.x
Browser Comparability (All Latest Versions);
Internet Explorer
Firefox
Opera
Safari
Google Chrome
Install:
1) Navigate to ACP> Plugins & Products > Add New Plugin
2) Product : vbulletin
Hook Location : parse_templates
Title : Main Nav Tab with Sub
Execution Order : 5
Plugin is Active : Yes
3) Insert the Code;
For Tabs On the Right Side Use This Code:
$template_hook['navtab_end'] .= '
<!-- MAIN TAB -->
<li class="na" onclick="this.className=this.className==\'na\'? \'selected\' : \'na\';">
<a href="javascript://" class="navtab" onclick="document.getElementById(\'sub1\').style.display=(d ocument.getElementById(\'sub1\').style.display==\' block\')?\'none\':\'block\';"> Search Engines </a>
</li>
<!-- SUB TABS -->
<ul class="floatcontainer" id="sub1" style="display:none;background-color:#000000;position:absolute;z-index:1;" >
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.bing.com">Bing</a></li>
<li class="popupmenu" >
<a href="javascript://" class="popupctrl">Weather</a>
<font color="#000000">
<div class="popupbody">
<li ></li>
<li><a href="list.php?r=category/46-Birding">Birding</a></li>
<li><a href="list.php?r=category/47-Boating">Boating</a></li>
</div>
</font>
</li>
</ul>
';
For Tabs in the Middle Use This Code:
$template_hook['navtab_middle'] .= '
<!-- MAIN TAB -->
<li class="na" onclick="this.className=this.className==\'na\'? \'selected\' : \'na\';">
<a href="javascript://" class="navtab" onclick="document.getElementById(\'sub1\').style.display=(d ocument.getElementById(\'sub1\').style.display==\' block\')?\'none\':\'block\';"> Search Engines </a>
</li>
<!-- SUB TABS -->
<ul class="floatcontainer" id="sub1" style="display:none;background-color:#000000;position:absolute;z-index:1;" >
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.bing.com">Bing</a></li>
<li class="popupmenu" >
<a href="javascript://" class="popupctrl">Weather</a>
<font color="#000000">
<div class="popupbody">
<li ></li>
<li><a href="list.php?r=category/46-Birding">Birding</a></li>
<li><a href="list.php?r=category/47-Boating">Boating</a></li>
</div>
</font>
</li>
</ul>
';
For Tabs On the Left Side Use This Code:
$template_hook['navtab_start'] .= '
<!-- MAIN TAB -->
<li class="na" onclick="this.className=this.className==\'na\'? \'selected\' : \'na\';">
<a href="javascript://" class="navtab" onclick="document.getElementById(\'sub1\').style.display=(d ocument.getElementById(\'sub1\').style.display==\' block\')?\'none\':\'block\';"> Search Engines </a>
</li>
<!-- SUB TABS -->
<ul class="floatcontainer" id="sub1" style="display:none;background-color:#000000;position:absolute;z-index:1;" >
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.bing.com">Bing</a></li>
<li class="popupmenu" >
<a href="javascript://" class="popupctrl">Weather</a>
<font color="#000000">
<div class="popupbody">
<li ></li>
<li><a href="list.php?r=category/46-Birding">Birding</a></li>
<li><a href="list.php?r=category/47-Boating">Boating</a></li>
</div>
</font>
</li>
</ul>
';
4) "sub1" is the unique name for that Tab set . To duplicate
you must change the "sub1" to "sub2" . For another Tab change it to "sub3" , ect ect .
You must change this in three Spots in the code. (Highlighted in Red)
5) "Search Engines" is the Main Tab Name .
This will Be Selected When Clicked. (Highlighted in Green)
6) "Google" , "Yahoo", or "Bing" is the Sub tab names to duplicate and
make another Sub Tab Just copy the Line of Code (Highlighted in Orange)
7) There is Also a Sub Tab Menu Drop Down Code That you can Duplicate
(Highlighted in Purple)
7) To change the Color of the background of the Sub Nav
Change the Hex color "#000000" to What ever you like (Highlighted in Blue)
8) Save , Now you Have a Main Nav Tab With connective Sub Tab Menu!
Notes:
- YOU MAY Duplicate it in the same Plugin
- You can use both Left , Middle , and Right codes at the same time!
- Make Sure you change the unique name in step 4 when duplicating a tab
- You may Duplicate Unlimited sub tabs in the same code
Screen Shot!
Not Selected ;
111643
Clicked Tab and now selected;
111644
DONT FORGET TO CLICK INSTALL (https://vborg.vbsupport.ru/vborg_miscactions.php?do=installhack&threadid=235005)
__________________________________________________ ______________
Change Log
v1.1 - 02/04/10
- Connected to a Single Main Tab (Seelter) (https://vborg.vbsupport.ru/showpost.php?p=1972737&postcount=38)
__________________________________________________ _____________
Here Are Some Other Versions:
Main Nav Tab (https://vborg.vbsupport.ru/showthread.php?t=232254)
Main Nav Tab Drop Down (https://vborg.vbsupport.ru/showthread.php?t=232134)
[CMS] Sub Nav Tabs (https://vborg.vbsupport.ru/showthread.php?t=232265)
[CMS] Sub Nav Tabs Drop Down (https://vborg.vbsupport.ru/showthread.php?t=232268)