PDA

View Full Version : [How To] Adding Navigation Tabs Fast and Easy


vbresults
10 Oct 2011, 03:19
Spoiler (vBulletin 4):

http://www.vbulletin.org/forum/attachment.php?attachmentid=138193&d=1336072549


// Yes, this is all the code you need to add the example above.

ExtendedNavigations::update(array(
'name' => 'Test Tab',
'children' => array(
'URL_1' => 'Sub Link 1',
'URL_2' => 'Sub Link 1.1',
'URL_3' => 'Sub Link 1.1.1'
),
'top_level' => true // NEW FEATURE IN 1.5
));


Spoiler (vBulletin 3):

http://www.vbulletin.org/forum/attachment.php?attachmentid=138323&stc=1&d=1336562730


ExtendedNavigations::update(array(
'name' => 'Test Tab',
'children' => array(
'Link A' => array(
'URL_1' => 'Sub Link 1',
'URL_2' => 'Sub Link 1.1',
'URL_3' => 'Sub Link 1.1.1'
)
)
));


---

Adding a navigation tab is not a new concept. There are two articles (Lynne's and Ragtek's) on vBulletin.org showing how to do this. Both solutions work, but you are reading this to learn how to do take it from workable to fast, efficient, and portable.

Let's first explore the two ways it is currently done. Let's say we want to add a 'Twitter' tab, linking to "twitter.com/xyz", on every page.

Using Lynne's method:
Plugin (hook: process_templates_complete)

$template_hook['navtab_end'] .= '<li><a class="navtab" href="http://twitter.com/xyz">Twitter</a></li>' ;


The benefit to this method is that it is straightforward for static, childless tabs; if you know a little php and html, this is not too difficult to implement. The problem with this method is that everything is hard-coded. The html is static; it does not make use of the template or phrase system. If you want to change the tab and add sub-links and drop-downs, you have mess with the html to get it just right. Doing anything else is going to require advanced skills and knowledge of the navigation tab system (first article (http://www.vbulletin.org/forum/showthread.php?t=226914)), no matter how you slice it.

Using Ragtek's method:

<!-- New Template: ragtek_twitter_navbar -->

<li><a class="navtab" href="http://twitter.com/xyz">{vb:rawphrase twitter}</a></li>


Plugin (hook: process_templates_complete)

$template_hook['navtab_middle'] .= vB_Template::create('ragtek_twitter_navbar')->render();


This method addresses on some of the weaknesses of Lynne's method and inherits others. Benefits include making use of the phrase and template systems. On the other hand, this shares many of the same weaknesses on the plugin side; anything but the most simple tab is going to require advanced knowledge (second article (http://www.vbulletin.org/forum/showthread.php?t=228313)).



The first two choices come down to either simplicity at the cost of flexibility, or flexibility at the cost of complexity. There is a way to have the best of both worlds and the worst of none.

How? The answer lies in the `LancerForHire - Extended Navigations` product.

Enter, `ExtendedNavigations::update`:
ExtendedNavigations::update(array('name' => $vbphrase['twitter'], 'url' => 'http://twitter.com/xyz'));
Let's bring this into context by replicating the tab examples in the two articles, but using the ExtendedNavigations class.

Lynne's:
Plugin (hook: global_setup_complete), Order: 999 or less

ExtendedNavigations::update(
array(
'name' => 'Link 1',
'script' => 'yourpage',
'children' => array(
'Drop Down' => array(
'sublink1.php' => 'SubLink 1',
'sublink2.php' => 'SubLink 2',
'sublink3.php' => 'SubLink 3'
)
)
),
array(
'name' => 'Link 2',
'url' => 'link2.php'
),
array(
'name' => 'Link 3',
'url' => 'link3.php'
)
);


Ragtek's:
Plugin (hook: global_setup_complete), Order: 999 or less

ExtendedNavigations::update(
array(
'name' => $vbphrase['ragtek_news'],
'script' => 'ragteknews',
'url' => 'news.php',
'children' => array(
'#' => '#'
)
)
);


No static html, no css classes, no new templates, no conditions. Simple. You could even drop this code in vB 3 and have a new navigation link (more in the final section).

The `ExtendedNavigations::update` function takes a variable number of arrays. Each array ($options) follows the format below.

$options['name']

Data Type: string. Required.

This is the name of the primary tab.

$options['url']

Data Type: string. Optional if $options['script'] is set; required otherwise.

This is the url of the primary tab.

$options['top_level'] (New in 1.5!)

Data Type: boolean. Optional. Default: false. This option is always/forcefully enabled in vBulletin 3.

Whether or not to use the direct menu format. See $options['children'] for more information.

$options['script']

Data Type: string. Optional if $options['url'] is set; required otherwise. This option has no effect in vBulletin 3.

This is the script that will highlight the primary tab, making the children/secondary links visible. If $options['url'] is empty, $options['url'] will be set to "{$options['script']}.php".

$options['after']

Data Type: boolean. Optional. Default: true.

Whether or not to show the primary tab after the default tabs. If set to false, the primary tab will show before the default ones.

$options['children']

Data Type: array. Optional.

The links or menus contained by the primary tab. Each array element can follow the following format:

string 'Child Link Name' => string 'Child Link Url'

If $options['top_level'] is enabled, the primary tab will become a drop-down in vBulletin 4. This format is not understood by vBulletin 3.

or

string 'Drop-down Name' => array(
'Drop-down Item-1 Link' => 'Drop-down Item-1 Name',
'Drop-down Item-2 Link' => 'Drop-down Item-2 Name'
# and so on...
);

This is not supported in vBulletin 4 if $options['top_level'] is enabled. In vBulletin 3, this is the standard format.



How do I get this?

Download the product-extended_navigations_ Xml and add it (extended_navigations) as a product dependency. Yes; that's it!

Extended Navigations is reverse compatible and can be used to add tabs to vBulletin 3 easily. To use Extended Navigations in vBulletin 3, an additional product download and dependency are required: product-extended_legacies. No code changes required. :)

Brought to you by LancerForHire, LLC. (lancerforhire.com)

HMBeaty
10 Oct 2011, 05:38
Awesome! Thanks for sharing :)

vbresults
10 Oct 2011, 22:29
Awesome! Thanks for sharing :)

You're welcome. :)

sweetpotato
12 Oct 2011, 10:48
Thank you for the nice work. I would like to know how to create a drop down menu like this:

Main Link
- sub link 1
- sub link 1.1
- sub link 1.1.1

In which the Main link have 03 level of sub link.

Is this possible please?

vbresults
12 Oct 2011, 13:40
Thank you for the nice work. I would like to know how to create a drop down menu like this:

Main Link
- sub link 1
- sub link 1.1
- sub link 1.1.1

In which the Main link have 03 level of sub link.

Is this possible please?

If I understood you right,

http://www.vbulletin.org/forum/attachment.php?attachmentid=133717&stc=1&d=1318426665


// I have only set $options['script'] to "index" for demonstration purposes.

ExtendedNavigations::update(array(
'name' => 'Test Tab',
'script' => 'index',
'children' => array(
'Link A' => array(
'URL_1' => 'Sub Link 1',
'URL_2' => 'Sub Link 1.1',
'URL_3' => 'Sub Link 1.1.1'
)
)
));


If I didn't understand you right, did you mean a drop-down of 3 items directly under "Test Tab"?

sweetpotato
13 Oct 2011, 01:29
Yes, I would like to create a drop - down directly under Test Tab. I mean the Test Tab have 3 links such as:
Link A
Link B
Link C
And in Link A for example, It should have sub link like:
Link A
- Link 1
- Link 2
- Link 3
Also in Link 1 we have sub link

Link 1
- Sub link 1
- Sub link 2

The purpose is to create a Main Nav Tab Drop Down (Test Tab) has 03 levels of sub link and all of them include the Main Nav are clickable.

Thank you very much,

vbresults
13 Oct 2011, 01:46
Yes, I would like to create a drop - down directly under Test Tab. I mean the Test Tab have 3 links such as:
Link A
Link B
Link C
And in Link A for example, It should have sub link like:
Link A
- Link 1
- Link 2
- Link 3
Also in Link 1 we have sub link

Link 1
- Sub link 1
- Sub link 2

The purpose is to create a Main Nav Tab Drop Down (Test Tab) has 03 levels of sub link and all of them include the Main Nav are clickable.

Thank you very much,

Oh, I don't think you can do this out of the box. This mod and article are for streamlining the process of adding tabs, not for adding functionality that doesn't exist out of the box. Sorry for the confusion!

This functionality is supported in 1.5. :)

sweetpotato
13 Oct 2011, 02:07
My purpose is to create a Main Nav for an area of the board which have forums and other levels of sub forums so I would like to raise the question for you.

Thank you for your kind help. Your work is still usefull for me.

as7apcool
13 Oct 2011, 11:35
thank u

goxy63
29 Oct 2011, 21:57
These options should be easy and default ones within VBulletin
I just dont have that much time to play around with VB these days so I use this mod which works just great regarding to this "issue"

http://www.vbulletin.org/forum/showthread.php?t=233629

I just dont get it, they waste so much time with things like FB or mobile apps but basic things like this are neglected :(

fluidswork
30 Oct 2011, 12:55
Great ..............

abdobasha2004
08 Nov 2011, 08:00
thanks for sharing this
.....

vbresults
23 Mar 2012, 05:54
Updated OP.

vbresults
03 May 2012, 19:53
Massive changes in 1.5!

Added $options['top_level'] feature (direct menus).
vBulletin 3 Drop-Down Menu Support
$options['children'] value (url)/key (name) order changed to the proper order, key/value.


#1 means the functionality sweetpotato was talking about is now included.

Winter Sonata
14 May 2012, 08:16
How can I make the custom tab placed before the Forum tab?

vbresults
22 May 2012, 16:16
How can I make the custom tab placed before the Forum tab?

Set $options['after'] to false

Nocturnal222
10 Jan 2013, 16:45
I will just upload this and edit the texts on vbulletin options?

ahobilam
27 Jul 2013, 14:57
Can you explain how to create a tab - drop down menu -> popup menu from drop down menu item like below?
http://www.vbulletin.org/forum/attachment.php?attachmentid=106849&d=1259347344