vBulletin Drop Downs on Hover (no click required)

vBulletin Drop Downs on Hover (no click required)

Mod Version: 1.00, by Gio~Logist

vB Version: 4.2.0	Rating: (4 votes - 3.50 average)	Installs: 26
Released: 20 Feb 2013	Last Update: Never	Downloads: 0
Not Supported Template Edits

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:

Code:

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

Code:

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

HTML Code:

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

Download

No files for download.

Screenshots

vBulletin LTS