vb.org Archive - [How To] Adding Navigation Tabs Fast and Easy

Spoiler (vBulletin 4):

https://vborg.vbsupport.ru/attachmen...3&d=1336072549

PHP Code:


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

https://vborg.vbsupport.ru/attachmen...1&d=1336562730

PHP Code:


		
			
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)

PHP Code:


		
			
$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), no matter how you slice it.

Using Ragtek's method:

HTML Code:

<!-- New Template: ragtek_twitter_navbar -->



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

Plugin (hook: process_templates_complete)

PHP Code:


		
			
$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).

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

PHP Code:


		
			
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

PHP Code:


		
			
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

PHP Code:


		
			
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.

Quote:

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

PHP Code:


		
			
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

PHP Code:


		
			
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.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01290 seconds Memory Usage 1,811KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)bbcode_html_printable (10)bbcode_php_printable (4)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.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 printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: