Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
[How To] Adding Navigation Tabs Fast and Easy
vbresults
Join Date: Apr 2009
Posts: 841

Jackson, WY
by vbresults vbresults is offline 10 Oct 2011
Rating: (1 vote - 3.00 average)

Spoiler (vBulletin 4):




Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Spoiler (vBulletin 3):




Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

---

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)

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Plugin (hook: process_templates_complete)

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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, 688 views)
File Type: png extended_navigations_15_legacy.png (20.7 KB, 652 views)
Attached Files
File Type: xml product-extended_legacies-1.3.1.xml (3.6 KB, 22 views)
File Type: xml product-extended_navigations-1.5.xml (6.9 KB, 47 views)

Last edited by vbresults : 09 May 2012 at 11:25. Reason: Updated Legacies Dependency.
Views: 6244
Reply With Quote
Comments
  #2  
Old 10 Oct 2011, 05:38
HMBeaty's Avatar
HMBeaty HMBeaty is offline
 
Join Date: Sep 2005
Real name: Brooks
Awesome! Thanks for sharing
__________________
"Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time!"
"It's important to only think about what you desire, not what you fear to achieve your ultimate goal!!
Reply With Quote
  #3  
Old 10 Oct 2011, 22:29
vbresults's Avatar
vbresults vbresults is offline
 
Join Date: Apr 2009
Originally Posted by HMBeaty View Post
Awesome! Thanks for sharing
You're welcome.
Reply With Quote
  #4  
Old 12 Oct 2011, 10:48
sweetpotato sweetpotato is offline
 
Join Date: Oct 2010
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 12 Oct 2011, 13:40
vbresults's Avatar
vbresults vbresults is offline
 
Join Date: Apr 2009
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,




Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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, 1214 views)

Last edited by vbresults : 03 May 2012 at 20:26. Reason: 1.5 code update.
Reply With Quote
  #6  
Old 13 Oct 2011, 01:29
sweetpotato sweetpotato is offline
 
Join Date: Oct 2010
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 13 Oct 2011, 01:46
vbresults's Avatar
vbresults vbresults is offline
 
Join Date: Apr 2009
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,
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.

Last edited by vbresults : 09 May 2012 at 18:12. Reason: Edit for 1.5.
Reply With Quote
  #8  
Old 13 Oct 2011, 02:07
sweetpotato sweetpotato is offline
 
Join Date: Oct 2010
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 13 Oct 2011, 11:35
as7apcool's Avatar
as7apcool as7apcool is offline
 
Join Date: Feb 2009
thank u
Reply With Quote
  #10  
Old 29 Oct 2011, 21:57
goxy63 goxy63 is offline
 
Join Date: Oct 2008
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
Reply With Quote
  #11  
Old 30 Oct 2011, 12:55
fluidswork's Avatar
fluidswork fluidswork is offline
 
Join Date: Apr 2010
Real name: Arnab Bhadra
Great ..............
Reply With Quote
  #12  
Old 08 Nov 2011, 08:00
abdobasha2004's Avatar
abdobasha2004 abdobasha2004 is offline
 
Join Date: Aug 2008
thanks for sharing this
.....
__________________
Egypt News website, latest Egyptian news updated instantly.
Reply With Quote
  #13  
Old 23 Mar 2012, 05:54
vbresults's Avatar
vbresults vbresults is offline
 
Join Date: Apr 2009
Updated OP.
Reply With Quote
  #14  
Old 03 May 2012, 19:53
vbresults's Avatar
vbresults vbresults is offline
 
Join Date: Apr 2009
Massive changes in 1.5!
  1. Added $options['top_level'] feature (direct menus).
  2. vBulletin 3 Drop-Down Menu Support
  3. $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.
Reply With Quote
  #15  
Old 14 May 2012, 08:16
Winter Sonata Winter Sonata is offline
 
Join Date: Apr 2010
How can I make the custom tab placed before the Forum tab?
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Article Options

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


New To Site? Need Help?

All times are GMT. The time now is 06:45.

Layout Options | Width: Wide Color: