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]

Reserved.

[Jeromedia603]

Going to give this a try after I view all the menu's it effects

[Hostboard]

You can also reference jquery from the default VB install.
../clientscript/jquery

[Gio~Logist]

Originally Posted by Jeromedia603

Going to give this a try after I view all the menu's it effects

Cool, lmk how it goes : )

Originally Posted by Hostboard

You can also reference jquery from the default VB install.
../clientscript/jquery

Correct! Just didn't check to see if it's the most up to date, but it should work regardless. The jquery i use is simple.

[Lee Roberts]

Was just about to submit something like this, thanks Gio !

However, adding this gives a space under the parent menu and this makes it hard to then hover over the popup menu, you can do it but you have to move your mouse really fast to catch it, see screen shot below.

.Me

[Gio~Logist]

Originally Posted by Lee Roberts

However, adding this gives a space under the parent menu and this makes it hard to then hover over the popup menu, you can do it but you have to move your mouse really fast to catch it, see screen shot below.

I can't seem to reproduce this error on any of my test websites or client websites. Can you link me over so that I can have a look and see what may be up? Probably a css clash with your style. In the meantime, giving .popupbody a negative margin-top may be a quick fix!

[marccap]

Originally Posted by Lee Roberts

Was just about to submit something like this, thanks Gio !

However, adding this gives a space under the parent menu and this makes it hard to then hover over the popup menu, you can do it but you have to move your mouse really fast to catch it, see screen shot below.

.Me

Im getting the same problem with the gap

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

[synseal]

Originally Posted by marccap

Im getting the same problem with the gap

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