Mini Mods - vBulletin Drop Downs on Hover (no click required)

Brought To You By
ModernvB - Vbulletin Solutions & Services
http://www.modernvb.com

What is this mod?
The standard drop down menus in vBulletin (navbar, etc) require a click in order to view the drop down menus. With this little mod, the drop downs will expand simply by hovering.

Ran into this with a client of mine and didn't want to charge them to write a few lines of code, so figured I'd just write it and share it with you all.

Included an attachment below in case you're wondering what kind of menus this mod effects.

Step 1
Determine whether or not you are calling jquery. If you're not sure you can view the source of your website and search for jquery, or just assume you don't have it. If you don't believe you have it, simply go to the headinclude_bottom template and enter this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Step 2
Go to your footer template and insert this at the bottom:

<script>
$(".popupmenu").hover(
  function () {
    $(this).find( '.popupbody' ).show();
  },
  function () {
    $(this).find( '.popupbody' ).hide();
  }
);
</script>

Optional *for some styles only, which have compatibility issues *

If you're having issues with the menu showing a bit below the button, add the following at the end of the additional.css template:

.navtabs ul.popupbody {
top: 21px;
}

[Gio~Logist]

Originally Posted by marccap

Im getting the same problem with the gap

Originally Posted by synseal

Same here, there's a gap and when you try to highlight the tab menu it disappears.

Originally Posted by qpurser

I installed this also and really don't have the issue you guys described. Kinda weird it does for some and not for others.
Yes there is a little gap but it doesn't give me problems using the mouse to select any options from the popup.

Thanks for the clarification guys. Alright so it happens to some of you and not others. If it is happening to you, can you please provide me with a url so that i can have a look?

[Lee Roberts]

Originally Posted by Gio~Logist

Thanks for the clarification guys. Alright so it happens to some of you and not others. If it is happening to you, can you please provide me with a url so that i can have a look?

In short no!, but only because my Dev vB is on a priv lan. Will look into this later as i'm hoping to get drop downs on mouse over anyway, will let you know what i find if anything.

If you hover, the menu shows but with a space/gab, if you then click the parent the menu redisplays as it should with no gap, so it most likely just an inconsistency with the css. My style just has a slightly bigger nav bar then out of the box, will have a look later anyway...

.Me

[synseal]

I will re install this now so you can check it for yourself.

Have a look at my site via signature in a couple of mins. I will leave it live until you post back.

Regards.

*Edit Added SS.

[Gio~Logist]

Originally Posted by synseal

I will re install this now so you can check it for yourself.

Have a look at my site via signature in a couple of mins. I will leave it live until you post back.

Regards.

*Edit Added SS.

Got it.

If you're having issues with the menu showing a bit below the button, add the following at the end of the additional.css template:

.navtabs ul.popupbody {
top: 21px;
}

[Lee Roberts]

, think the drop down is only postioned after the selection of the parent (li), if you click a parent, then move to another parent with a drop down, the drop down will show with out a click of the parent.

No idea why they didnt style the menu to postion (where it should be), then hide it, then display it with a selection or click of the parent.

.Me

[marccap]

Originally Posted by Gio~Logist

Got it.

If you're having issues with the menu showing a bit below the button, add the following at the end of the additional.css template:

.navtabs ul.popupbody {
top: 21px;
}

Thanks that has solved the problem - One other small issue though. When you hover over a username and the drop down items such as "view profile", "private message" etc etc there is also a small gap also - Hopefully another quick fix

My site if needed - http://www.platboyonline.com/forum.php
Screen Shot - http://gyazo.com/7fc3751d420fb95e9846b449bf80cbad

[synseal]

Yes that has fixed it now thanks.

[Gio~Logist]

Originally Posted by marccap

Thanks that has solved the problem - One other small issue though. When you hover over a username and the drop down items such as "view profile", "private message" etc etc there is also a small gap also - Hopefully another quick fix

My site if needed - http://www.platboyonline.com/forum.php
Screen Shot - http://gyazo.com/7fc3751d420fb95e9846b449bf80cbad

Awesome. So it only happens here for you now? I can't seem to produce it on your website, guessing the code i included fixed it?

[Gio~Logist]

Originally Posted by synseal

Yes that has fixed it now thanks.

Glad to know that worked!

[marccap]

Originally Posted by Gio~Logist

Awesome. So it only happens here for you now? I can't seem to produce it on your website, guessing the code i included fixed it?

The code you added fixed the first problem but not the member info problem so I've unistalled for now.