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

Reply
 
Thread Tools
[HOW TO - vB4] How to Add Drop Down Navigation Items to the Navbar
Shelby
Join Date: Nov 2005
Posts: 67

 

Show Printable Version Email this Page Subscription
Shelby Shelby is offline 11-18-2009, 10:00 PM

Some people really like the drop down navigation that is found in the Vbulletin 3.0 series, or are looking to add additional drop down navigation to the navbar in Vbulletin 4.0. This plugin and new template will allow you to do that.


First, is to goto the Plugins and Products section, this section is in the left hand column of the admin panel near the bottom. In that section you will need to click the option to "Add New Plugin". Note that the red text from both the plugin and template must be the same. You can name it whatever you want, but they must match.

For the new plugin you will enter the following details.
Hook Location: process_templates_complete
Title: Whatever You Want
Code:
Code:
global $template_hook;
$newTemplate = vB_Template::create('dropdown');
$template_hook['navtab_end'] .= $newTemplate->render();
For step two. You need to make the template that will be used in the navbar. Simply goto the style manager and in choose "Add New Template" from the options. From there, you just need to enter the following.
Title: dropdown
Code:
Code:
<li class="popupmenu">
<a href="javascript://" class="popupctrl navtab" style="background:transparent url({vb:stylevar imgdir_misc}/arrow.png) no-repeat {vb:stylevar right} center; padding-right: 15px">Drop Bombs</a>
<ul class="popupbody popuphover">
<li><a style="text-indent: 0px; color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink1.php">SubLink 1</a></li>
<li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink2.php">SubLink 2</a></li>
<li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink3.php">SubLink 3</a></li>
</ul>
</li>
Reply With Quote
  #12  
Old 11-26-2009, 10:34 PM
Eric Anderson Eric Anderson is offline
 
Join Date: Oct 2009
Posts: 56
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Ok trying to put a sublink into a sublink and this is where I got stuck. in the attached I have clicked "Tech Area" and the menu drops down Now "Carbs" is not a link it is a category (highlighted in blue). "Carb Cleaning" "Jetting" are Links under the category "Carbs". I do not want "Carb Cleaning" and "Jetting" to be there till "Carbs" is either Clicked or Hovered and I would like it to appear down and to the right any Ideas?
Thanks
Eric

Plugin
PHP Code:
global $template_hook;
$newTemplate vB_Template::create('dropdown');
$template_hook['navtab_end'] .= $newTemplate->render(); 
Template
PHP Code:
<li class="popupmenu">
<
a href="javascript://" class="popupctrl navtab" style="background:transparent url({vb:stylevar imgdir_misc}/arrow.png) no-repeat {vb:stylevar right} center; padding-right: 15px">Tech Area</a>
<
ul class="popupbody popuphover">
<
li><a style="text-indent: 0px; color:{vb:stylevar navbar_selected_popup_body_a_Color}" title="Carbs">Carbs</a></li>
                <
li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="Carbs.php" title="Carb Cleaning">Carb Cleaning</a></li>
                    <
li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="Setup800.php" title="Jetting">Jetting</a></li>
<
li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink2.php">SubLink 2</a></li>
<
li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink3.php">SubLink 3</a></li>
</
ul>
</
li
Attached Images
File Type: jpg Tab Sublink.jpg (34.1 KB, 0 views)
Reply With Quote
  #13  
Old 11-27-2009, 09:11 AM
TandyServices's Avatar
TandyServices TandyServices is offline
 
Join Date: Aug 2008
Location: All over the USA
Posts: 216
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Hey Eric,
I do not know if this will work but try something like this:
Code:
<li class="popupmenu"> 
<a href="javascript://" class="popupctrl navtab" style="background:transparent url({vb:stylevar imgdir_misc}/arrow.png) no-repeat {vb:stylevar right} center; padding-right: 15px">Tech Area</a> 
<ul class="popupbody popuphover"> 
<li><a style="text-indent: 0px; color:{vb:stylevar navbar_selected_popup_body_a_Color}" title="Carbs">Carbs</a>
    <ul> 
    <li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="Carbs.php" title="Carb Cleaning">Carb Cleaning</a></li>
    <li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="Setup800.php" title="Jetting">Jetting</a></li>
    </ul>
</li>
<li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink2.php">SubLink 2</a></li> 
<li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink3.php">SubLink 3</a></li> 
</ul>
Please let me know
Reply With Quote
  #14  
Old 11-27-2009, 04:42 PM
Eric Anderson Eric Anderson is offline
 
Join Date: Oct 2009
Posts: 56
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanks but not exactly what I am looking for looking fr something more like the attached
Attached Images
File Type: jpg subsubmenu.jpg (45.3 KB, 0 views)
Reply With Quote
  #15  
Old 11-28-2009, 12:04 PM
TandyServices's Avatar
TandyServices TandyServices is offline
 
Join Date: Aug 2008
Location: All over the USA
Posts: 216
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Well tried my code out and did not work anyways.. Sorry..
Reply With Quote
  #16  
Old 11-28-2009, 11:22 PM
abdobasha2004's Avatar
abdobasha2004 abdobasha2004 is offline
 
Join Date: Aug 2008
Posts: 541
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

thanks a lot
Reply With Quote
  #17  
Old 11-29-2009, 06:16 AM
Eric Anderson Eric Anderson is offline
 
Join Date: Oct 2009
Posts: 56
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I modified your code so the tab would highlight when hovered or clicked like the rest of the tabs. Unfortunately I had to lose the arrow. I attached a pic of the change and here is the code.

Template:
PHP Code:
<li class="popupmenu">
<
a href="javascript://" class="popupctrl navtab">Vmax4.com Pages</a>
<
ul class="popupbody popuphover">
<
li><a style="text-indent: 0px; color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink1.php">SubLink 1</a></li>
<
li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink2.php">SubLink 2</a></li>
<
li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink3.php">SubLink 3</a></li>
<
li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink2.php">SubLink 2</a></li>
<
li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink3.php">SubLink 3</a></li>
</
ul
Attached Images
File Type: jpg dropdown.jpg (74.8 KB, 0 views)
Reply With Quote
  #18  
Old 11-29-2009, 09:13 PM
crazyace crazyace is offline
 
Join Date: Oct 2009
Location: Nashville TN
Posts: 201
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by taffy056 View Post

Can I ask how would you set this so only certain usergroups would see the links, and the tabs?

Thanks
You would need to add this code:

PHP Code:
if (is_member_of($vbulletin->userinfo56717191839))
{
some code in here blah blah



So you would end up with something like this:
PHP Code:
if (is_member_of($vbulletin->userinfo567171918))
{
global 
$template_hook;
$newTemplate vB_Template::create('dropdown');
$template_hook['navtab_end'] .= $newTemplate->render();

Remember when deleting groups from the code, not to leave a comma at the end. Or you will get errors. If you notice I have a few different groups added to mine.


You can also set up two or more tabs to have drop downs and only be visible to some user-groups by doing the following:

PHP Code:
if (is_member_of($vbulletin->userinfo5671918))
{
global 
$template_hook;
$newTemplate vB_Template::create('dropdown');
$template_hook['navtab_end'] .= $newTemplate->render();
}

if (
is_member_of($vbulletin->userinfo56171918))
{
global 
$template_hook;
$newTemplate vB_Template::create('dropdown2');
$template_hook['navtab_end'] .= $newTemplate->render();

I added the usergroup code to the second tab and then just changed the group numbers to match my needs. This will also require you to create a new template also. So don't forget about that.
Reply With Quote
  #19  
Old 12-02-2009, 07:54 PM
Vaupell's Avatar
Vaupell Vaupell is offline
 
Join Date: Apr 2008
Location: Esbjerg, Denmark
Posts: 1,036
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thank you,, lovely ,, worked the first time.. <3 <3
Reply With Quote
  #20  
Old 12-08-2009, 12:47 PM
ywwz ywwz is offline
 
Join Date: Jul 2009
Posts: 255
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Best plug in till now for VB4. thank you so!
Reply With Quote
  #21  
Old 12-12-2009, 02:23 PM
mabersoft mabersoft is offline
 
Join Date: Jun 2009
Posts: 110
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Eric Anderson View Post
I modified your code so the tab would highlight when hovered or clicked like the rest of the tabs. Unfortunately I had to lose the arrow. I attached a pic of the change and here is the code.

Template:
PHP Code:
<li class="popupmenu">
<
a href="javascript://" class="popupctrl navtab">Vmax4.com Pages</a>
<
ul class="popupbody popuphover">
<
li><a style="text-indent: 0px; color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink1.php">SubLink 1</a></li>
<
li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink2.php">SubLink 2</a></li>
<
li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink3.php">SubLink 3</a></li>
<
li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink2.php">SubLink 2</a></li>
<
li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink3.php">SubLink 3</a></li>
</
ul

PHP Code:
<li class="popupmenu">
<
a href="javascript://" class="popupctrl navtab" style="background:transparent url({vb:stylevar imgdir_misc}/arrow.png) no-repeat {vb:stylevar right} center; padding-right: 15px">Vmax4.com Pages</a>
<
ul class="popupbody popuphover">
<
li><a style="text-indent: 0px; color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink1.php">SubLink 1</a></li>
<
li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink2.php">SubLink 2</a></li>
<
li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink3.php">SubLink 3</a></li>
<
li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink2.php">SubLink 2</a></li>
<
li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="sublink3.php">SubLink 3</a></li>
</
ul
Try this. This has arrow. Works for me in FireFox
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 10:06 AM.


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.07903 seconds
  • Memory Usage 2,394KB
  • Queries Executed 26 (?)
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
  • (3)bbcode_code
  • (8)bbcode_php
  • (2)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
  • (3)pagenav_pagelink
  • (11)post_thanks_box
  • (13)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (3)postbit_attachment
  • (11)postbit_onlinestatus
  • (11)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_display_complete
  • post_thanks_function_can_thank_this_post_start
  • postbit_attachment
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete