vb.org Archive - Navbar Drop Down Menu (3.8 Drop Downs in 4.0)

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=252)

- - Navbar Drop Down Menu (3.8 Drop Downs in 4.0) - Need Help. (https://vborg.vbsupport.ru/showthread.php?t=228106)

Shelby

11-16-2009 03:41 PM

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

1 Attachment(s)

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.

Code:

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/attachmen...1&d=1258393151

https://vborg.vbsupport.ru/attachmen...1&d=1258393151

Shadab

11-16-2009 04:12 PM

1 Attachment(s)

Hi Shelby.

This works, although only when the tab is in 'selected' state:

HTML Code:

<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/attachmen...1&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

11-16-2009 07:22 PM

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

11-16-2009 09:36 PM

plugin:

PHP Code:


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

template - dropdown:

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

11-16-2009 10:41 PM

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

11-16-2009 11:39 PM

1 Attachment(s)

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

11-17-2009 03:10 AM

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

11-17-2009 04:20 AM

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

11-18-2009 04:19 AM

1 Attachment(s)

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:

Code:

global $template_hook;

$newTemplate = vB_Template::create('dropdown');

$template_hook['navtab_end'] .= $newTemplate->render();

And this as my template:

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

11-18-2009 03:02 PM

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

11-18-2009 04:34 PM

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

11-18-2009 05:18 PM

I love this, and will likely be incorporating it.

Lynne

11-18-2009 05:53 PM

Quote:

Originally Posted by Shelby (Post 1916691)

I think it should be an article, yes. I think some users may prefer to use dropdowns like this.

reefland

11-26-2009 07:08 PM

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

11-27-2009 05:00 PM

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.

All times are GMT. The time now is 10:54 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01575 seconds Memory Usage 1,768KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (3)bbcode_code_printable (2)bbcode_html_printable (1)bbcode_php_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (15)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.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 printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: