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?

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

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:

PHP Code:

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

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