Announcement

Collapse
No announcement yet.

Main Navigation Menu Dropdown

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Paid Mod Main Navigation Menu Dropdown

    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.

    Compatibility:
    • Compatible with vB5 and 6 (self-hosted)
    • Not compatible with vBCloud. For vBCloud version, click here.​
    • This mod only transforms the main navigation menu for bigger screens (desktop). The navigation menu for smaller screens (mobile) are not changed.​

    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)

    Buy Now Add to Cart View Cart

    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)

    Buy Now Add to Cart View Cart

    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.

    Add to Cart View Cart


    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!

    Want to pay using Credit/Debit Card? Contact us and we will send you an invoice where you can use your own card.

    Last edited by glennrocksvb; 10-31-2023, 10:36 PM. Reason: Added vB6 compatibility
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

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

    Comment


      #3
      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.
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


        #4
        This mod is now available. Please see first post.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #5
          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:
          Click image for larger version

Name:	arrow.jpg
Views:	1131
Size:	168.9 KB
ID:	385

          Comment


            #6
            Please ignore:

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

            Comment


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


              Click image for larger version

Name:	hover.jpg
Views:	1127
Size:	169.0 KB
ID:	388

              Comment


              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                I'll look into that.

              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                The issue doesn't occur on this site vbmods.rocks. Do you have custom css that may interfere with this mod?

              #8
              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.

              Comment


              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                Please PM me the order id and your name you are using in Paypal.

              #9
              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.

              Comment


                #10
                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.
                Last edited by glennrocksvb; 04-01-2017, 11:24 AM.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


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

                  Click image for larger version

Name:	menu-.jpg
Views:	546
Size:	13.3 KB
ID:	3727

                  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?


                  Comment


                  • glennrocksvb
                    glennrocksvb commented
                    Editing a comment
                    Will look into it. Thanks for reporting.

                  #12
                  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.

                  Click image for larger version  Name:	point off.jpg Views:	1 Size:	28.6 KB ID:	3749


                  Comment


                    #13
                    I'll take​ a look when I get home.
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment


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

                      Comment


                        #15
                        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.
                        Helpful? Donate. Thanks!
                        Buy me a coffeePayPal QR Code
                        Fast VPS Host for vBulletin:
                        A2 Hosting & IONOS

                        Comment

                        Users Viewing This Page

                        Collapse

                        There is 1 user viewing this forum topic.

                        • Guest Guest

                        Latest Posts

                        Collapse

                        Working...
                        X
                        Searching...Please wait.
                        An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                        Please push the back button and reload the previous window.'
                        An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                        Please push the back button and reload the previous window.'
                        An internal error has occurred and the module cannot be displayed.
                        There are no results that meet this criteria.
                        Search Result for "|||"