NJAquaman - Main Nav Tabs w/ Connective Sub Nav

[admin]

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 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!
http://img.photo.zing.vn/file_uploads/gallery/1024x768/2010/02/06/10/13781265427330.pnghttp://img.photo.zing.vn/file_uploads/gallery/1024x768/2010/02/06/10/23531265427337.png