[HOW TO - vB4] How to Add Drop Down Navigation Items to the Navbar

[Shelby]

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.

https://vborg.vbsupport.ru/external/2009/11/1.php?attachmentid=38192

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

[Magz]

Does what it says on the tin :)

Very simple, and effective

thanks

[Parture]

Works great. Is there a way to get the same background color as you have over it like the other buttons?

[LoveStream]

simple and great, thanks

[taffy056]

Now that is great, I have finally a dropdown menu where I want it, thanks very much :)

--------------- Added 1258657656 at 1258657656 ---------------

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

Thanks

[Zaiaku]

Simple. Nice. Clean.

And the example screenshot. Priceless!

[EidolonAH]

Perfect, thank you Shelby.

[steven s]

Thank you.
Is there a way to choose where in the nav bar you want it located?

[DesignWerks]

Thank you.
Is there a way to choose where in the nav bar you want it located?

Substituting 'navtab_middle' for 'navtab_end' places it after the Forum tab and before the Blogs tab.

[TandyServices]

I have changed it up a few to open a new screen. Hope this helps a few.


<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">vBulletin Sites</a>
<ul class="popupbody popuphover">
<li><a href="http://www.vbulletin.com" target="_blank" style="text-indent: 0px; color:{vb:stylevar navbar_selected_popup_body_a_Color}">vBulletin</a></li>
<li><a href="http://www.vbulletin.org" target="_blank" style="color:{vb:stylevar navbar_selected_popup_body_a_Color}">vBulletin.org</a></li>
<li><a href="http://www.vbulletin-germany.com/" target="_blank" style="color:{vb:stylevar navbar_selected_popup_body_a_Color}">vBulletin-Germany</a></li>
</ul>
</li>


To only let members see you could try:

<vb:if condition="!$show['guest']">
<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">vBulletin Sites</a>
<ul class="popupbody popuphover">
<li><a href="http://www.vbulletin.com (http://www.vbulletin.com/)" target="_blank" style="text-indent: 0px; color:{vb:stylevar navbar_selected_popup_body_a_Color}">vBulletin</a></li>
<li><a href="http://www.vbulletin.org (http://www.vbulletin.org/)" target="_blank" style="color:{vb:stylevar navbar_selected_popup_body_a_Color}">vBulletin.org</a></li>
<li><a href="http://www.vbulletin-germany.com/" target="_blank" style="color:{vb:stylevar navbar_selected_popup_body_a_Color}">vBulletin-Germany</a></li>
</ul>
</li>
</vb:if>


I also found out that if you want two drop downs it worked for me like this:

<vb:if condition="!$show['guest']">
<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">vBulletin Sites</a>
<ul class="popupbody popuphover">
<li><a href="http://www.vbulletin.com (http://www.vbulletin.com/)" target="_blank" style="text-indent: 0px; color:{vb:stylevar navbar_selected_popup_body_a_Color}">vBulletin</a></li>
<li><a href="http://www.vbulletin.org (http://www.vbulletin.org/)" target="_blank" style="color:{vb:stylevar navbar_selected_popup_body_a_Color}">vBulletin.org</a></li>
<li><a href="http://www.vbulletin-germany.com/" target="_blank" style="color:{vb:stylevar navbar_selected_popup_body_a_Color}">vBulletin-Germany</a></li>
</ul>
</li>
</vb:if>

<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">vBulletin Sites 2</a>
<ul class="popupbody popuphover">
<li><a href="http://www.vbulletin.com (http://www.vbulletin.com/)" target="_blank" style="text-indent: 0px; color:{vb:stylevar navbar_selected_popup_body_a_Color}">vBulletin</a></li>
<li><a href="http://www.vbulletin.org (http://www.vbulletin.org/)" target="_blank" style="color:{vb:stylevar navbar_selected_popup_body_a_Color}">vBulletin.org</a></li>
<li><a href="http://www.vbulletin-germany.com/" target="_blank" style="color:{vb:stylevar navbar_selected_popup_body_a_Color}">vBulletin-Germany</a></li>
</ul>
</li>


Top one is hidden from guest. Then the other all can see.

Great code Shelby.Hope you don't mind but was just playing a bit with it and wanted to share.

[Eric Anderson]

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?:confused:
Thanks
Eric

Plugin

global $template_hook;
$newTemplate = vB_Template::create('dropdown');
$template_hook['navtab_end'] .= $newTemplate->render();


Template

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

[TandyServices]

Hey Eric,
I do not know if this will work but try something like this:

<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

[Eric Anderson]

Thanks but not exactly what I am looking for looking fr something more like the attached

[TandyServices]

Well tried my code out and did not work anyways.. Sorry..

[abdobasha2004]

thanks a lot

[Eric Anderson]

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

[crazyace]

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:

if (is_member_of($vbulletin->userinfo, 5, 6, 7, 17, 19, 18, 39))
{
some code in here blah blah
}



So you would end up with something like this:
if (is_member_of($vbulletin->userinfo, 5, 6, 7, 17, 19, 18))
{
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:

if (is_member_of($vbulletin->userinfo, 5, 6, 7, 19, 18))
{
global $template_hook;
$newTemplate = vB_Template::create('dropdown');
$template_hook['navtab_end'] .= $newTemplate->render();
}

if (is_member_of($vbulletin->userinfo, 5, 6, 17, 19, 18))
{
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.

[Vaupell]

Thank you,, lovely ,, worked the first time.. <3 <3

[ywwz]

Best plug in till now for VB4. thank you so!

[mabersoft]

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


<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

[Pod]

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


You can try to add the arrow manually:

<a href="javascript://" class="popupctrl navtab">Vmax4.com Pages <img src="{vb:stylevar imgdir_misc}/arrow.png" style="vertical-align: middle;" /></a>


Also, to save "ink", you can put the color part of the style in the ul tag, instead of every a tag. It works for me, at least.

[nubian]

LOL @ drop bombs on your moms, that's awesome!
But why was the Shelby banned?

[ywwz]

Substituting 'navtab_middle' for 'navtab_end' places it after the Forum tab and before the Blogs tab.============================

can i use Begin instead of middle or end?

[Lynne]

can i use Begin instead of middle or end?
You may use whichever template_hook you want in the navbar.

[stejoh]

Thanks for great instructions.

Is there a way to keep the new Tab "highlighted" when reading a custom page.

I have created an About tab and when I choose a custom page from the dropdown-meny, the latest active "native" tab is still highlighted.

You can take a look at www.99nicu.org/forum

[TheSupportForum]

does anyone know how to make this a clickable link

<li class="popupmenu">
<a href="javascript://" class="popupctrl navtab" style="background:transparent url(images/misc/arrow.png) no-repeat {vb:stylevar right} center; padding-right: 15px">Webmaster Links</a>

when you click it i want to be able to do to a page


i tried

<li class="popupmenu">
<a href="webmaster.php" class="popupctrl navtab" style="background:transparent url(images/misc/arrow.png) no-repeat {vb:stylevar right} center; padding-right: 15px">Webmaster Links</a>

doesnt work

[Front Range 4x4]

Thank you, very useful

[anilsaxena]

This works great.
I noticed that user has to click first then only on hover it automatically shows drop-down. Is there a way to show drop-down without click?

[MooseMoney]

NOPE - does not work for me!

I have meticulously followed all the steps as per message No. 1. Nothing - no navbar buttons.
Neither can I find the plugin I created during step 2.
I have vB4 CMS suite installed - please help.

[businessmeet]

EDIT: Nevermind!! I figured it out! Sorry! Just remove that "{vb:rawphrase faq}" stuff, with your own wording.

Maybe I overlooked something, but how do you adjust single link codes or rename them in the little navigation menu part? Like the "New Posts" "Private Messages" "FAQ" "Calendar" links? It seemed easier to do in version 3.8.4. Now in 4.0 it's:

<li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase faq}</a></li>

[albanah]

Thanks good plugin
But it only appears in forum navbar, not in cms.

How can I make it appear in cms also ?

[albanah]

Kind reminder

[Lynne]

Kind reminder
There is no reason this shouldn't show up on the CMS also. I just tested it on my site and it shows up fine. Make sure the template you created is in the style you use in your CMS pages (check your sections to verify what style they use).

[albanah]

There is no reason this shouldn't show up on the CMS also. I just tested it on my site and it shows up fine. Make sure the template you created is in the style you use in your CMS pages (check your sections to verify what style they use).

When I change to my style, the layout is changed, although I selected 3 columns layout.
How to match the styles of forum and cms?

[Lynne]

When I change to my style, the layout is changed, although I selected 3 columns layout.
How to match the styles of forum and cms?
To set the style for your section, go to Home > go to Section > hover over section name > click on pencil > style setting is right there.

This really has nothing to do with this article. If you have more questions on the CMS, you should be posting them at vb.com

[albanah]

Many thanks Lynne,
You are right, style was different.
It works well now.
However, the layout became 2 columns, although it is set to 3 Column Fixed-Liquid-Fixed.

[princeedward]

thanks for the tutorial....;)

[ukwoman]

Thank you all very much for this. How do I do the same thing but with no subnav? For example I just want to show calendar on the main Nav bar.

[ukwoman]

Thanks, this worked great.

However, I would really like to know how to just put Groups and Calendar on the Navbar with no dropdowns.

Your help is much appreciated:)

[Front Range 4x4]

Thank you Shelby! I wish I hadn't waited so long to try this - I'm using 5 drop downs side-by-side and it works great!

:erm: Went to mark it installed and realized I did try it before but my users are telling me there's a lot of overlapping and weird display. Bummer.

[sulasno]

post deleted

never mind; I got it working

thanks to the original contributor

[ageurtse]

did someone managed to do sub - sub menu's on the navbar like in post 13 (https://vborg.vbsupport.ru/showpost.php?p=1921701&postcount=13)
i realy need that.

[AfterWorldForum]

Great article.

Any way to get the template cached, though? I have debub mode turned on, and this template is the only one that seems to be not cached.

Thanks.

Peter.

--------------- Added 1274379546 at 1274379546 ---------------

Hmm. I also have the problem with the navbar background not changing color when highlighted. Removing the style stuff works, but then the arrow icon dissappears.

Using IE8, but also no luck in FF.


<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"><img src="images/entropiaplanets/process.png" border="0" align="top" alt="EntropiaPlanets Tools" />&nbsp;&nbsp;EP Tools</a>
<ul class="popupbody popuphover">
<li><a style="text-indent: 0px; color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="business.php">Yellow pages</a></li>
<li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="http://www.entropiaplanets.com/forums/vbay.php">Auction</a></li>
<li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="http://www.entropiaplanets.com/forums/misc.php?do=cchatbox">Chat</a></li>
<li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="http://www.entropiaplanets.com/forums/vbugs.php">Bug tracker</a></li>
<li><a style="color:{vb:stylevar navbar_selected_popup_body_a_Color}" href="http://www.entropiaplanets.com/forums/missions.php">Mission tracker</a></li>
</ul>
</li>

[AfterWorldForum]

Found out how to get the caching working. I created a new plugin, linked it to the hook cache_templates, and used the following code to cache the template:


$cache = array_merge($cache, array('<template_name>'));

[AfterWorldForum]

Anyone got a working solution for the non-changing background colour by any chance? I have not yet managed to get that bit working.

[merk_aus]

Thanks worked brilliantly straight out of the box - have bookmarked it to add additional functionality to our site in the coming days this is absolutely brilliant.

[mordor1]

Great tutorial works fine even in 4.04

[wpeloquin]

Is there any way to make the default "Forum" navtab a dropdown, instead of adding a new tab?

I run a gaming board that hosts multiple games, guilds/clans, etc. I wish to make the Forum navtab a dropdown that i can then have the links to the various areas on the board. I followed this tutorial to create a plugin/template to help show what i am looking to do.

I figure i could remove the default "Forum" tab and replace it with the new one, but i was wondering if it can just be done on the current, default tab.

[Steph H]

Thank you! After a little trial and error, I got this to work wonderfully on our site. I appreciate the help!

[reefland]

Lynn or anyone,

Any ideas how to make this menu stay on top of a .swf file? I have a .swf advert in ad_below_navbar and the dropdown menu slides behind the advert.

Ideas welcomed.

[eues]

does anyone know how to make this a clickable link

<li class="popupmenu">
<a href="javascript://" class="popupctrl navtab" style="background:transparent url(images/misc/arrow.png) no-repeat {vb:stylevar right} center; padding-right: 15px">Webmaster Links</a>

when you click it i want to be able to do to a page


i tried

<li class="popupmenu">
<a href="webmaster.php" class="popupctrl navtab" style="background:transparent url(images/misc/arrow.png) no-repeat {vb:stylevar right} center; padding-right: 15px">Webmaster Links</a>

doesnt work

I would like to know this too please!!

[tech4c]

thanks

[NashChristian]

THIS is Eric's Original Objective & Problem:
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.

This response does NOT make sense to me, because it does NOT maintain Eric's Objective:
<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.

YES, the arrow works, but the tab is NOT highlight when hovered or clicked like the rest of the tabs (which was the whole point).

Finally, this approach PARTIALLY works:
You can try to add the arrow manually:

<a href="javascript://" class="popupctrl navtab">Vmax4.com Pages <img src="{vb:stylevar imgdir_misc}/arrow.png" style="vertical-align: middle;" /></a>

The problem is that this arrow does NOT change color along with the text color. In other words, it remains white even when the tab color is white (or near white), and is then invisible.

Am I doing something wrong or does ANYONE have a solution to this?

--------------- Added 1284366171 at 1284366171 ---------------

Any ideas how to make this menu stay on top of a .swf file? I have a .swf advert in ad_below_navbar and the dropdown menu slides behind the advert.

Love to hear a reply on this conflict!

Anyone?

--------------- Added 1284366378 at 1284366378 ---------------

I noticed that user has to click first then only on hover it automatically shows drop-down. Is there a way to show drop-down without click?

Love to hear an answer to this issue too!

Anyone?

--------------- Added 1284366699 at 1284366699 ---------------

How do I do the same thing but with no subnav? For example I just want to show calendar on the main Nav bar.

Finally, an answer to this would be VERY helpful. I'd like to be able to use a different customized subnav for each of my primary pages (forums, blogs, groups...).

This mod would be tremendously useful if we could get these minor issues addressed.

Thanks for the mod and for any help!
:D Jeff

--------------- Added 1284404633 at 1284404633 ---------------

I've started a new thread HERE (https://vborg.vbsupport.ru/showthread.php?t=250426) for anyone who wants to follow or participate in the development of the modifications above.

[Parture]

For my drop down box how do I get the hover color to be the same as the normal tabs?

See here...
http://biblocality.com/forums/forum.php

[Parture]

Anyone figure out how to get the hover color to change at the same time keeping the arrow and getting the arrow to change color as well?

See what the problem is here...
http://biblocality.com/forums/forum.php

[Parture]

As a result of changing colors in style variables, my drop down boxes span the whole screen. Something went haywire with this plugin.

Actually I don't know this is the cause. All I know is that the drop down boxes span the whole screen in IE and the username is bolden and larger when using IE, but with Firefox it is still the same. This just happened when I was playing with the style variable settings.

[merk_aus]

Can someone please help me find out what i need to do to get this to appear at the beginning of the navbar before the home/forum tabs.

[Lynne]

Can someone please help me find out what i need to do to get this to appear at the beginning of the navbar before the home/forum tabs.
You need to look at the navbar template and pick a template_hook that is at the beginning of the navtab bar - the example in the first post used the template_hook at the end of the navtab bar. You may also need to change the execution order for the plugin if you have two plugins trying to use the same template_hook.

[merk_aus]

You need to look at the navbar template and pick a template_hook that is at the beginning of the navtab bar - the example in the first post used the template_hook at the end of the navtab bar. You may also need to change the execution order for the plugin if you have two plugins trying to use the same template_hook.

Thanks lynne you are a true asset to this website.

[Sarcoth]

Is there a way to control the execution order from outside the plugin? I have the following setting in my product script:

<setting varname="showroster_navbar_order" displayorder="20">
<datatype>posint</datatype>
<validationcode><![CDATA[return ($data >= 1);]]></validationcode>
<defaultvalue>5</defaultvalue>
</setting>

I cannot find anything that would allow me to adjust the order like the location (navtab_start, navtab_middle, and navtab_end). Those work fine, it is the ordering I cannot get to work. Any ideas?

Edited: Sorry, this probably is not the correct place to ask. I've asked the question in a coder's forum instead. Thank you.

[abdulbasitsaeed]

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

Thank you very much for this, Eric Anderson. It works perfectly on 4.0.6.

I must agree with NashChristian. I am unable to insert the arrow image in a satisfactory manner. Also, the margin on the right of the text seems to be more than on the left.

http://forums.pakfellows.com/

Lynne (or anyone else), do you think you could please help us out with this one? :)

[albanah]

Substituting 'navtab_middle' for 'navtab_end' places it after the Forum tab and before the Blogs tab.============================

can i use Begin instead of middle or end?

you cannot use Begin.

Use the following code and it will display BEFORE forum, immediately after Home tab

global $template_hook;
$newTemplate = vB_Template::create('dropdown_newtab');
$template_hook['navtab_start'] .= $newTemplate->render();

[Da-Vinci]

Can anybody point me in the right direction of how to do this?

https://vborg.vbsupport.ru/external/2011/04/17.jpg

[RobbieZ]

Can anybody point me in the right direction of how to do this?

https://vborg.vbsupport.ru/external/2011/04/17.jpg

UKBL created a quality dropdown menu system for 3.8 > https://vborg.vbsupport.ru/showthread.php?t=203521

I changed the code so sub-foums would appear by utilizing the same code for drop down, OK it was a lot of messing about and a lot of code, seriously wrecked my head at times but the end product was great!

I have never tried it on VB4 but I do have a few days off next week and may do this as a mini project on my test forum!

I would need a link to the skin your using in your OP.

[Da-Vinci]

Wow cheers Robbie, that would be great, I've got it on the default skin on my VB4 forum, the image above is something somebody else posted on page 1 I just used it to demonstrate the effect I was after.

I was looking at this

http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm

As a possible way to get the submenu effect.

Edit:

I thought it might be better to post in the programming discussion forum to stop this article going off topic, so I've posted here. https://vborg.vbsupport.ru/showthread.php?p=2187926

[XiTCLUB]

great work

[Mustiii]

I have a question how must i modify the code to add dropdown items to the subnavbar as you can see on the picture?

https://vborg.vbsupport.ru/external/2011/04/11.png

Thanks for any help

[Da-Vinci]

I have a question how must i modify the code to add dropdown items to the subnavbar as you can see on the picture?

https://vborg.vbsupport.ru/external/2011/04/11.png

Thanks for any help

That's covered in this article.

https://vborg.vbsupport.ru/showthread.php?t=232579

https://vborg.vbsupport.ru/attachment.php?attachmentid=109490&stc=1&d=1262991479

[albanah]

installed.
it works very well for 4.1.2
Many thanks

[BRotondi]

1000 Thanks for the infos! How can I make the pull-down appear without click, simply when hovering?

Thanks!
Bruno

[Mukashi]

Another interested person wondering how either
a) The arrow can be kept while having the tab highlight as other tabs do
b) The pull-down menu appear on hover, instead of on click.

I'd also be interested in how we can do something which I'd imagine is much more simple....just add a new tab that would function as an external link when clicked. Just want a nice quick link to places such as my Wiki. ^^;

[SuperTaz]

Works great for all my FPS games stat tracker links.

[joshtrav]

I have seen a lot of folks asking how to do the down arrow so that it would highlight properly, as well as the background.

Using this code:

<a href="javascript://" class="popupctrl navtab">Drop Bombs ▼</a>


instead of this:

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

worked well for us.

To get the down arrow use the ampersand code #9660;

[marlera]

Great article, tnx!

[lucky_one07]

thanks alot this is what i was looking for

[LordEd]

So I got this working, except.. I am not totally pleased with the location I put it in.

What other options are there to the navtab_ function when using the CMS? Alternatively, if anyone could explain how I could find the alternatives myself that would be wicked :)

[malmazan]

It would be nice to know how to select background, text and hover colors so that they are different to the subNavBar ones.

I personally prefer this arrow: src="{vb:stylevar imgdir_misc}/menu_open.gif
and its different from the one used in the subNav.

[CouponWCents]

Thank you soooo much!!

[Truth66]

Hi,

I have a mystery with this drop down tab.

I've had it working on my site for a while. Today, just for the heck of it I tested my site in Google Chrome.
In Google Chrome, the Title wording of the tab appears below tab and the tab is blank. When I click onto the Title, the drop down menu appears.
This does not happen in Internet Explorer 8.

The same thing happens in Firefox.

In addition when viewing my site in Google Chrome and Firefox, the tab does highlight, but doesn't highlight in Internet Explorer 8

Any ideas how to correct this mystery with Google Chrome & Firefox?

Thanks.

[Littlerocket]

Nice little mod. Anyone have any ideas how to reduce the box size?

www.toxicplanet.co.uk

I take it it's some global setting somewhere and unrelated to this actual mod. Cheers

[mjr0483]

Any way to get the dropdown to open on hover?

[malmazan]

Any way to get the dropdown to open on hover?
I would love that too

[intruder]

How can I add the arrow img if my style is:
domain/images/styles/STYLE.NAME/misc/arrow.png because it's not working

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


How can I add the navtab after cms, something like:
$template_hook['navtab_end'] ....... $template_hook['navtab_after_cms']

and how can I reduce the sublink space:

https://vborg.vbsupport.ru/external/2011/12/5.png

For the sublink space I found that the padding:
.popupbody li > label {
padding-bottom: 8px;
padding-left: 10px;
padding-right: 10px;
padding-top: 8px;
}


should be:

.popupbody li > a,
.popupbody li > label {
padding-bottom: 0;
padding-left: 10px;
padding-right: 10px;
padding-top: 0;
}


and is defined in additional.css

.popupbody li > a,
.popupbody li > label {
padding:{vb:math {vb:stylevar padding}-2} {vb:stylevar padding};
}

So where could I edit "stylevar padding" ?
It's not in the Style Variable Editor / popupmenu_padding because there I have 2, 0, 0, 0

[betts02]

SOLVED, Cheers great work

[ClErK1991]

thanks shelby, i gonna try this :)

[GoneBushX]

Great Info, THX!

With the new navigation manager in 4.2 still not allowing you to add drop down menu to parent tabs :mad:; would it be best practice on 4.2.1 to add a tab with the default nav. man. and then just update the corresponding tabs code in forumdisplay.php with your code in step 2? If that makes sense ;)

OR forget nav. man. and just insert your step 2 code after {vb:raw navigation} in navbar template; Like this-
https://vborg.vbsupport.ru/showthread.php?t=246687

:D

[ozzy47]

Yes you can have dropdowns in the Navigation Manager now as of v4.2.1

[GoneBushX]

Not within the navbar (parent tabs) only in the submenu?

[ozzy47]

Yes you can, they added that functionality in 4.2.1

http://www.vbulletin.com/forum/forum/vbulletin-announcements/vbulletin-announcements_aa/3961570-vbulletin-4-2-1-beta-1-is-now-available-for-download-do-not-upgrade-live-prod-installs

[GoneBushX]

BETA only?

Found it; great job updating the manual and tuts vB! :down:

Target Menu-
This is the Menu that will open upon a click on the Tab. Sub menus belonging to the selected tab must be created before one can be assigned to the tab as the main menu.

[crazyboy1661]

does it available in xml format?

[ozzy47]

What? This is a tutorial on how to add a dropdown tab prior to vB v4.2.1, what do you need with a xml?

[john7911]

Thank you ;)

[Searchthis]

So if I'm running 4.2.2 do I need this mod or is it included in Vbulletin?

[ozzy47]

It is included as of 4.2

[Savy83]

It is included as of 4.2


Can you tell me how I do this? I did everything in nav manager

I added links to the main tab, but they just appear below the tab area, and not as a drop down style menu.

[ozzy47]

1) Create a tab.
2) Create a menu for the tab.
3) Edit the tab and find the setting, "Target Menu" select the menu you just created, click on save.
4) Add links to the menu you created, these are what will show up as the dropdown items in the tab.

[ywwz]

Bravo！！！

[john7911]

Hi :)
How can I change the font style?

I changed in this code but nothing changed :o
.popupbody li a,
.popupbody li label {
display:block;
color: {vb:stylevar popupmenu_link_color};
background:{vb:stylevar popupmenu_link_background};
padding:{vb:math {vb:math {vb:stylevar popupmenu_height}-{vb:math {vb:stylevar popupmenu_font.fontSize}{vb:stylevar popupmenu_font.units}*{vb:stylevar line_height}}}/2


}
If I use Firebug i can see the difference.
https://vborg.vbsupport.ru/external/2016/01/3.jpg
Thank you ;)

[mangmel]

thanks..... working

[W2OE_Prodigy]

1) Create a tab.
2) Create a menu for the tab.
3) Edit the tab and find the setting, "Target Menu" select the menu you just created, click on save.
4) Add links to the menu you created, these are what will show up as the dropdown items in the tab.

I tried this but am still having issues with it showing up a drop down menu. I followed the steps completely multiple times but still not having any luck. Am I missing a setting somewhere?