Navbar Drop Down Menu (3.8 Drop Downs in 4.0) - Need Help.

[Shelby]

One thing I really liked in the 3.8 series were the drop down navigation items in the navbar. In 4.0 those don't exist. I'd like reimpliment them and I'm having a bit of trouble and hoping someone can lend a hand.

Here is the plugin code I'm using to add a new navigation item and then give it dropdown capability. However, things don't exactly look right, I'm hoping someone can help me figure out why it doesn't look right.

global $template_hook;

$template_hook['navtab_end'] .= '

<li class="popupmenu selected">
<a href="javascript://" class="popupctrl" style="background: transparent">Drop Down</a>
<ul class="popupbody popuphover">
<li><a href="sublink1.php">SubLink 1</a></li>
<li><a href="sublink2.php">SubLink 2</a></li>
<li><a href="sublink3.php">SubLink 3</a></li>
</ul>
</li>

' ;

I need to fix two things. Specifically, I need the "Drop Down" item to take on the font styling of navtab, and then for some reason Sublink 1 is indented. Perhaps I need new CSS for this. Any ideas?

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

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

[Shadab]

Hi Shelby.

This works, although only when the tab is in 'selected' state:
<li class="selected popupmenu">
<a class="navtab popupctrl" href="javascript://">Drop Down</a>
<ul class="popupbody popuphover">
<li><a href="sublink1.php">SubLink 1</a></li>
<li><a href="sublink2.php">SubLink 2</a></li>
<li><a href="sublink3.php">SubLink 3</a></li>
</ul>
</li>


https://vborg.vbsupport.ru/attachment.php?attachmentid=106211&d=1258394871

Removing the 'selected' class seems to break the dropdown menu styling. I haven't really looked at all the CSS classes, ids, etc that are used in this new skin (and the new dropdown system); so I could be missing something.
.

[Shelby]

Yeah,

The problem is once I remove the selected state the navtabs lose their background and look funny, but it solves the problem where the navbar item looks like it is selected. I think if this can be worked out a lot of people would like this but I'm running into a roadblock mentally. Bleh.

[Lynne]

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

template - dropdown:
<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 Down</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>

[Shelby]

Heya Lynne,

Was there a particular reason you did it that way vs a single plugin out of curisoity? I'm not a coder but figured I'd ask, just wondering.

Also, I gave it a whirl Lynne and it seems the same issue exists. The text links for the SubLinks end up white on a white background. And the arrow dissappears when highlighted.

Thanks for the help you two. I'm a bit closer I think to figuring this out.

[Lynne]

Weird. It worked just fine for me using the method I posted. Check your page source and see if the color:black is showing up in the <a> tag like I have above. Also, check your stylevar "navbar_selected_popup_body_a_Color" and see if it is modified to white instead of black.
106223

I did it by using a template so that I could use the stylevars to get the color from the users css instead of saying color:black.

[Shelby]

Lynne,

You were right, just some settings. Only two things left to fix if anyone else would like to lend a hand.

Specifically, when you mouseover the dropdown, the down arrow dissappears. Secondly, how to change the background color of the li navtab's.

[Lynne]

On my forum the arrow doesn't disappear when you mouseover it, so I'm not sure why that is happening for you.

And exactly what background color are you talking about? If you are talking about for all the css, you should download Don's StyleVar Dictionary and look in there for the navtabs stuff.

[Shelby]

Well I worked out the CSS issues, but I noticed a small bug and tested it on a fresh install.

As above, I'm using this as my plugin:

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

And this as my 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">Drop Down</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>

And it appears to work great. However, there is a negative side effect or bug. Once you turn on the plugin the "Forums" navtab is perminantly selected and the subnavtabs only show the forum options, even while viewing the homepage or CMS, the forums is still selected and the submenu display the options for this.

As you can see in the image, I'm browsing the homepage, but the submenu is showing me on the forums. And the submenu that is supposed to be displayed (highlighted in red) isn't showing up. Note this is only an issue with the CMS for some reason. If you do the "Whats New" link the submenu changes.

106341

I've been banging my head against the wall as to this particular problem. For me personally this isn't a big deal because I plan to get rid of the whole second navigation bar entirely, but this might not be a good effect for everyone.

I've determined that regardless of what I put in the template. Even if the template is blank, just turning on the plugin causes the bug. So I've narrowed it down to the plugin.

[Lynne]

It's interferring with the plugin adding the Home tab. Change the hook location for your plugin to process_templates_complete and it will work fine. :)

[Shelby]

Yeah that did the trick.

I've almost got my content dropdown working to auto populate with whatever sections there are based on permissions, so I'd nail this as complete, want to type this up as an article?

[odln018]

I love this, and will likely be incorporating it.

[Lynne]

Yeah that did the trick.

I've almost got my content dropdown working to auto populate with whatever sections there are based on permissions, so I'd nail this as complete, want to type this up as an article?
I think it should be an article, yes. I think some users may prefer to use dropdowns like this.

[reefland]

Shelby,

I would like to incorporate this on my site. Specifically, I want a button called "Schedules" and then the drop down be auto-populated with each custom calendar that has been created. Therefore, I have 2 questions:
1. What is the final plugin and Style code to get this to work?
2. Do you know how to get it to take each calendar that has created automatically? If not I can manually add into the template.

Thanks!

[Shelby]

Check this thread for the guide.

https://vborg.vbsupport.ru/showthread.php?p=1919837

As for #2, this will require additional modifcation and though it is possible does require quite a few more steps and work not detailed in the original post.