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

[kemraj]

Thank you for your help, but i don't like the idea of all the pages using this class "popupbody" being popped up when hovered. Can it just work with the navbars alone?

[bzcomputers]

Originally Posted by kemraj

Thank you for your help, but i don't like the idea of all the pages using this class "popupbody" being popped up when hovered. Can it just work with the navbars alone?

Yes, but the specific code needed will be dependant on your vbulletin installation. A link to the site would help.

[kemraj]

hmmm