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

[CouponWCents]

Thanks so much! WOrks perfectly!!

[Art Andrews]

This is a great addition. However, it has created a problem for a number of the dropdowns, especially on smaller devices like tablets. Is there a way to apply this to certain dropdowns and exclude others?

[tbworld]

This is the solution I used.

Copied and renamed vbulletin_core.js.
Modified popupbody so it handled mouseover and mouseout. Thus it has a delay in closing the dropdown for those that mouseout of the box.

Copied default popupbody function, renamed and changed the selector that is being detected. Use this for the accordion menus in the user control panel. You have to modify the user control panel template and replace the popupbody selector with the new selector obviously.

For tablets and other touch devices. I do feature detection for "touch" and conditionally load the default vbulletin_core.js or the modified vbulletin_core.js. I also added this piece of javascript from google as a touch screen helper https://developers.google.com/mobile...s/fast_buttons. Solved almost all of that double click annoyance.

---

I understand that not everyone can modifiy the javascript so you could just expand this jquery code and add a quick mouseout event with delay (650ms works for me), and accomplish the same thing.

Anyway my point is that you can just change the detected selector in the templates that triggers the javascript or jquery. That should solve your problem. Unfortunately, I cannot post the source of the javascript, that would be in violation of vbulletin copyright rules. (At least I think it is...). But if you are going down this route I will try to give you a hand, if you have a question.

[Art Andrews]

Just a note; I found a much easier way to resolve our issue. If you only want the hover to apply to certain classes or ids, you can just replace .popupmenu in Gio's script with a list (seperated by commas) of the areas you want it to apply to. We found that allowing it apply to the whole site was a nightmare, especially on mobile devices like the iPad. Now we have complete control over what menus are hover-to-open and what menus are click-to-open, with just one slight tweak of the script.

[bzcomputers]

Originally Posted by Art Andrews

Just a note; I found a much easier way to resolve our issue. If you only want the hover to apply to certain classes or ids, you can just replace .popupmenu in Gio's script with a list (seperated by commas) of the areas you want it to apply to. We found that allowing it apply to the whole site was a nightmare, especially on mobile devices like the iPad. Now we have complete control over what menus are hover-to-open and what menus are click-to-open, with just one slight tweak of the script.

Care to share what list you settled on?

[Art Andrews]

Originally Posted by bzcomputers

Care to share what list you settled on?

We only wanted the dropdowns we created in the Navigation Manager to work with hover, so those will be unique to every site. Ours all start with "#tab_njmz_" followed by a three digit number. We just added those in and for the time being took everything else out. I might add a few more areas, like the notifications tab at the very top of the page, but in doing this we INSTANTLY stopped a number of usability members were having especially in areas like pagination and the forum search dropdown.

[bzcomputers]

For those of you who may a little more guidance...

Replace this line:

$(".popupmenu").hover(

With something like this:

$("#tab_mjk1_938, #tab_mza2_195, #tab_mze1_234, #menu_mdu0_893, #vbmenu_community, #vbmenu_actions, #vbmenu_qlinks, .nonotifications, .notifications").hover(

Be sure to change the items in red to reference to your own specific tabs or menus.

--------------------
Edit: I had issues with this change myself. If there were any menus overlapping when activated, this would open up both/all the menus. Had to revert back until I can figure out a solution.

[edrecovery]

Is there an easier way to do the hovermenu without editing code? I'm not good at editing code.

[kemraj]

Can this be done with out using jquery.min.js , i tend not to use it on my front page because of it huge size.

[bzcomputers]

Originally Posted by kemraj

Can this be done with out using jquery.min.js , i tend not to use it on my front page because of it huge size.

Is there an alternative to jQuery out there - probably. But most of the options you will find probably involve using jQuery.

jQuery is so commonly used these days that many users will already have it cached. Just link to it at the Google hosted library shown above (the most likely place they have it cached from), and be sure to use the latest version.

Currently:
1.11.2 (if you want to support Internet Explorer 6,7,8 - recommended)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

OR

2.1.3 (if you don't care to support IE 6,7,8)

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

I personally place the script right in the "footer" template so jquery is available throughout vBulletin.

For additional details this article covers it pretty well: http://encosia.com/3-reasons-why-you...query-for-you/. The article was originally written over 5 years ago, but recently updated just a month ago.