PDA

View Full Version : Add-On Releases - NJAquaman - Main Nav Tabs w/ Connective Sub Nav


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)

Skyrider
02-04-2010, 04:14 PM
Invalid Attachment specified. If you followed a valid link, please notify the administrator
:( Sad panda.

NJAquaman
02-04-2010, 04:36 PM
:( Sad panda.

Attach Has now been fixed...

Thanks!

princeedward
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! :p

is this normal?

:confused:

mhackl
02-05-2010, 11:25 PM
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! :p

is this normal?

:confused:

This would be my question as well.

NJAquaman
02-06-2010, 11:16 AM
This would be my question as well.
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;
$vboptions['selectednavtab']


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! :p



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


Thank You
Glad i could help!

NJAquaman

princeedward
02-07-2010, 05:39 AM
sorry but i dont get you.....pls. view my search code plugin if it's correct

$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
03-21-2010, 02:39 AM
To unhighlight the forum tab on a page find this

<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:

<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
06-02-2011, 10:44 PM
any way to combine this, with:


$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