NJAquaman - Main Nav Tabs w/ Connective Sub Nav

NJAquaman - Main Nav Tabs w/ Connective Sub Nav

Mod Version: 1.0, by NJAquaman

vB Version: 4.0.x	Rating: (3 votes - 5.00 average)	Installs: 22
Released: 04 Feb 2010	Last Update: Never	Downloads: 0
Not Supported Uses Plugins Re-usable Code Translations

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:

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=(document.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:

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=(document.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:

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=(document.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 ;

Clicked Tab and now selected;

________________________________________________________________
Change Log
v1.1 - 02/04/10
- Connected to a Single Main Tab (Seelter)

Spoiler (click to open)

Any idea how I could use this and also be able to add drop down sub nav tabs connected to a single main tab. Example would be a main tab called "Links" with a sub nav drop down called "Search Engines" with "Google" "Yahoo" "Bing" as the links. I hope that makes sense...

_______________________________________________________________

Here Are Some Other Versions:
Main Nav Tab
Main Nav Tab Drop Down
[CMS] Sub Nav Tabs
[CMS] Sub Nav Tabs Drop Down

Download

No files for download.

Screenshots

New Posting Features NJAquaman - New Post Count!	vBulletin 3.8 Add-ons
Add-On Releases NJAquaman - Main Nav Tabs	vBulletin 4.x Add-ons
Add-On Releases NJAquaman - Main Nav Tab Drop Down	vBulletin 4.x Add-ons
Admin CP Style NJAquaman - [ACP] vB4 Admin Style	vBulletin 4.x Styles
Add-On Releases NJAquaman - [CMS] Sub Nav Tabs	vBulletin 4.x Add-ons

vBulletin LTS

Spoiler (click to open)