The Arcive of vBulletin Modifications Site.

NJAquaman - Main Nav Tabs w/ Connective Sub Nav · **Released**: 02-03-2010

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 ;
2010-02-04_081948.png

Clicked Tab and now selected;
2010-02-04_082001.png

DONT FORGET TO CLICK INSTALL

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

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

Skyrider · #2 02-04-2010, 04:14 PM

Quote:

Invalid Attachment specified. If you followed a valid link, please notify the administrator

Sad panda.

NJAquaman · #3 02-04-2010, 04:36 PM

Quote:

Originally Posted by FF|Skyrider

Sad panda.

Attach Has now been fixed...

Thanks!

princeedward · #4 02-05-2010, 09:38 AM

hi....this would be great....thanks

how come the search tab is not the only one highlighted when i choose or select and click? the forum tab is also highlighted...or anyone last clicked

or my forum tab is highlighted then i click the search engine...both of them are highlighted also...now that i created one or 2 new tab from this mod 2 of them + forum are all highlighted....so i got 3 tabs highlighted LOL!

is this normal?

mhackl · #5 02-05-2010, 11:25 PM

Quote:

Originally Posted by princeedward

hi....this would be great....thanks

how come the search tab is not the only one highlighted when i choose or select and click? the forum tab is also highlighted...or anyone last clicked

or my forum tab is highlighted then i click the search engine...both of them are highlighted also...now that i created one or 2 new tab from this mod 2 of them + forum are all highlighted....so i got 3 tabs highlighted LOL!

is this normal?

This would be my question as well.

NJAquaman · #6 02-06-2010, 11:16 AM

Quote:

Originally Posted by mhackl

This would be my question as well.

Quote:

Originally Posted by princeedward

hi....this would be great....thanks

how come the search tab is not the only one highlighted when i choose or select and
click? the forum tab is also highlighted...or anyone last clicked

-The Default Settings in vBulletin Highlight to section that you are on ,
This can be changed by editing the Templates.
Here is the Search Code for finding what you want to change;

Code:

$vboptions['selectednavtab']

Quote:

Originally Posted by princeedward

hi....this would be great....thanks

now that i created one or 2 new tab from this mod 2 of them + forum are all
highlighted....so i got 3 tabs highlighted LOL!

- Please Read Step 4 As this explains when making a duplicate tab.

Thank You
Glad i could help!

NJAquaman

princeedward · #7 02-07-2010, 05:39 AM

sorry but i dont get you.....pls. view my search code plugin if it's correct

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(\'search\').style.display=(document.getElementById(\'search\').style.display==\'block\')?\'none\':\'block\';"> Search Engines  </a>
</li>

<!-- SUB TABS -->
<ul class="floatcontainer" id="search" 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>


</ul> 

';

like i said...i got always the forum highlighted and the search tab

thanks....

Jeremy8 · #8 03-21-2010, 02:39 AM

To unhighlight the forum tab on a page find this

Code:

<vb:if condition="!$vboptions['selectednavtab'] AND THIS_SCRIPT != 'search'">

I wanted to make the Who's Online page a tab so this is what I changed it to:

Code:

<vb:if condition="!$vboptions['selectednavtab'] AND THIS_SCRIPT != 'search' AND THIS_SCRIPT != 'online'">

I added AND THIS_SCRIPT != 'online'

'online' can be anything before a php thing in the URL

So if you want it to not highlight on all forums you'd put 'forumdisplay'

I'm not sure how to do it with pages like a specific forum, so maybe someone else could say how.

rob01 · #9 06-02-2011, 09:44 PM

any way to combine this, with:

Code:

$template_hook['navtab_end'] .= '
<li class="popupmenu" >
<a  href="javascript://" class="popupctrl navtab">Featured Articles</a>
<ul class="popupbody ">
<font color="#000000">
<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>
<li><a href="list.php?r=category/48-Camping">Camping</a></li>
</font>
</ul>
</li>
';

with your oder release

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.18581 seconds Memory Usage 4,796KB Queries Executed 23 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (8)bbcode_code (6)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (9)post_thanks_box (9)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (9)post_thanks_postbit_info (8)postbit (9)postbit_onlinestatus (9)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end postbit_factory postbit_display_start fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages: