Official - Paid Main Navigation Menu Dropdown

[glennrocksvb Founder/Coder Find all posts View Profile Close glennrocksvb]

By default, vBulletin 5's main navigation menu only displays the sub-menu for the currently active main menu. If you are in a forum page and you want to create a new blog, you would have to click Blogs first then click "Create a New Blog". That's two clicks. If we display the sub-menus as you hover each main menu item, then you would have to click only once. This is a better user experience as user might have expected from a standard main menu navigation from other sites.

Note: This mod only transforms the main navigation menu for bigger screens (desktop). The navigation menu for smaller screens (mobile) are not changed.

For vBCloud version, click here.

Demo:
Please see the main menu navigation at the top of this forum.

Instructions:
Please refer to the installation document included in the file.

Version History:

v1.6

• PHP 8 compatibility

v1.5

• Fixed bug introduced in v1.4.

v1.4

• Fixed menu dropdown not closing when moving the cursor away from the dropdown from the sides or bottom.

v1.3

• Miscellaneous fixes.

v1.2

• This version was skipped by mistake.

v1.1

• Miscellaneous fixes.

v1.0

• Initial version

Price 1:

$20 (with vbmods.rocks branding in the footer)



Price 2: (NOTE: If you already bought this mod with Price 1 when there was no Price 2 yet, then do not purchase this one but contact us to pay only $25)

$45 ($20 base price + $25 branding-free)

Need help or not comfortable installing this mod? Purchase the installation service below:

Product Installation Add-On: $20

Purchase this product add-on to get professional installation of this mod from us.

Don't have a PayPal account yet or want to use a new account to purchase this mod? Sign up with PayPal now and get $5 reward!

[Sp0rtsJunki3 Member Find all posts View Profile Close Sp0rtsJunki3]

I'd love to implement this on my site. Is it still in development?

[glennrocksvb Founder/Coder Find all posts View Profile Close glennrocksvb]

It's basically done but I still need to optimize it to make it run more efficiently. Check back for future updates on this thread.

[glennrocksvb Founder/Coder Find all posts View Profile Close glennrocksvb]

This mod is now available. Please see first post.

[William Senior Member Find all posts View Profile Close William]

I can't figure out how to change the little down arrow's color. I need it to be dark, as you can see the others are invisible:

[William Senior Member Find all posts View Profile Close William]

Please ignore:

.l-desktop .section-item.custom-has-subnav::after {
    border-color: #000 transparent transparent transparent !important;
    }

[William Senior Member Find all posts View Profile Close William]

One last thing. When hovering over a menu option and navigating away from it the hover sticks.... For example you can see where both menu options are highlighted also the mouse pointer is not ontop of the menu option:

[glennrocksvb]

I'll look into that.

[glennrocksvb]

The issue doesn't occur on this site vbmods.rocks. Do you have custom css that may interfere with this mod?

[Sp0rtsJunki3 Member Find all posts View Profile Close Sp0rtsJunki3]

Would it be possible to have the most recent version of this sent to me again? I didn't download the recent update in time and my link expired.

[glennrocksvb]

Please PM me the order id and your name you are using in Paypal.

[420 Member Find all posts View Profile Close 420]

Bought this mod and I really like it. There is a problem for touch screen devices such as tablets though.
When you click on the arrow for the dropdown menu. The sublinks show for a few seconds while the page loads the link that was clicked.

For instance when clicking the BLOGS tab. the page already loads "https://vbmods.rocks/blogs". You have to be fast to click the NEW ENTRIES link.

[glennrocksvb Founder/Coder Find all posts View Profile Close glennrocksvb]

That's an inherent problem with touch devices which doesn't have hover event. If you'd do it as click for touch devices, then you'd lose the ability to click on the main menu and go that page. In your example, you won't be able to go to /blogs

I'll check if there's a workaround.

[420 Member Find all posts View Profile Close 420]

I made a workaround by changing the forums link to # and adding a link "Forum Home" to that menu.



An other small usability detail:

When inspecting the menu, the arrow pointing down is in an other area then the forum link.
When I point my mouse cursor between the FORUMS link and the ARROW DOWN. the dropdown menu disappears.
This is annoying because sometimes when you want to select a link from a menu and move your cursor in a specific way the dropdown will not appear.

Would it not be better if the arrow was a background image inside the <li> element? Or is there a better wat to improve this?

[glennrocksvb]

Will look into it. Thanks for reporting.

[William Senior Member Find all posts View Profile Close William]

Hi Glenn,

I can't figure this css out. When I mouse over a menu item and then drag the pointer upwards the text remains white after leaving it.

I see

#channel-tabbar ul li.selected:not(.current) > a {
color: #FFFFFF !important;
}

But if I change it in additional_css the effects do not happen.




https://www.christforums.org

[glennrocksvb Founder/Coder Find all posts View Profile Close glennrocksvb]

I'll take a look when I get home.

[William Senior Member Find all posts View Profile Close William]

No rush. I'm trying to make the background white to match the rest of the navbar. However, the text needs be black and remain black when the menu option is either selected or not selected.

Thanks Glenn,
William

[glennrocksvb Founder/Coder Find all posts View Profile Close glennrocksvb]

I see a different default theme on your site which looks like the vB5 Default Style. I don't see the style in the screenshot you posted

Anyway, the trick to debug the CSS for this particular mod is to add "selected" class in the <li> element with "section-item" class and then setting "display: block" in the submenu dropdown <ul> (with class "custom-subnav-dropdown") inside the section-item element. When you do this, the submenu dropdown will be kept opened and you can inspect the elements without the dropdown being hidden to customize the style.