Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 4 Articles

Reply
 
Thread Tools
[How To] Adding Navigation Tabs Fast and Easy
vbresults
Join Date: Apr 2009
Posts: 687

 

Show Printable Version Email this Page Subscription
vbresults vbresults is offline 10-09-2011, 10:00 PM

Spoiler (vBulletin 4):



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



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.
Attached Images
File Type: png extended_navigations_15_top_level.png (6.9 KB, 0 views)
File Type: png extended_navigations_15_legacy.png (20.7 KB, 0 views)
Attached Files
File Type: xml product-extended_legacies-1.3.1.xml (3.6 KB, 24 views)
File Type: xml product-extended_navigations-1.5.xml (6.9 KB, 50 views)
Reply With Quote
  #2  
Old 10-10-2011, 04:38 AM
HMBeaty's Avatar
HMBeaty HMBeaty is offline
 
Join Date: Sep 2005
Posts: 4,141
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Awesome! Thanks for sharing
Reply With Quote
  #3  
Old 10-10-2011, 09:29 PM
vbresults vbresults is offline
 
Join Date: Apr 2009
Posts: 687
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by HMBeaty View Post
Awesome! Thanks for sharing
You're welcome.
Reply With Quote
  #4  
Old 10-12-2011, 09:48 AM
sweetpotato sweetpotato is offline
 
Join Date: Oct 2010
Posts: 239
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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?
Reply With Quote
  #5  
Old 10-12-2011, 12:40 PM
vbresults vbresults is offline
 
Join Date: Apr 2009
Posts: 687
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by sweetpotato View Post
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,



PHP Code:
// 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"?
Attached Images
File Type: png example_a.png (7.7 KB, 0 views)
Reply With Quote
  #6  
Old 10-13-2011, 12:29 AM
sweetpotato sweetpotato is offline
 
Join Date: Oct 2010
Posts: 239
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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,
Reply With Quote
  #7  
Old 10-13-2011, 12:46 AM
vbresults vbresults is offline
 
Join Date: Apr 2009
Posts: 687
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by sweetpotato View Post
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,
[s]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![/s]

This functionality is supported in 1.5.
Reply With Quote
  #8  
Old 10-13-2011, 01:07 AM
sweetpotato sweetpotato is offline
 
Join Date: Oct 2010
Posts: 239
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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.
Reply With Quote
  #9  
Old 10-13-2011, 10:35 AM
as7apcool as7apcool is offline
 
Join Date: Feb 2009
Posts: 194
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

thank u
Reply With Quote
  #10  
Old 10-29-2011, 08:57 PM
goxy63 goxy63 is offline
 
Join Date: Oct 2008
Location: its like another planet:D
Posts: 657
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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"

https://vborg.vbsupport.ru/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
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:32 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04530 seconds
  • Memory Usage 2,368KB
  • Queries Executed 24 (?)
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
  • (1)bbcode_html
  • (10)bbcode_php
  • (4)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (10)post_thanks_box
  • (8)post_thanks_box_bit
  • (10)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (10)post_thanks_postbit_info
  • (9)postbit
  • (5)postbit_attachment
  • (10)postbit_onlinestatus
  • (10)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
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete