vBulletin Drop Downs on Hover (no click required)

[Gio~Logist]

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]

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

Cool, lmk how it goes : )

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]

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]

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]

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.

[Gio~Logist]

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.

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]

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]

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]

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

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]

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

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]

Yes that has fixed it now thanks.

Glad to know that worked!

[marccap]

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.

[FTG LIQUID CL]

Works with 4.1.12!

[Gio~Logist]

Works with 4.1.12!

:up::up:

[thang28101993]

Thanks so much for great mod!
It use well on Frirefox and Chrome! But I try on IE 7, it is wrong! When hover the mouse to menu, child menu didn't place on below parent menu, it has moved to another place.

Any one has good idea for this issue? Thanks so much!

P.s: I want to fix this, because some people still use old IE version!

[tbworld]

P.s: I want to fix this, because some people still use old IE version!

I do not use this mod but if it was me: For the 1% of users that use IE7 -- just use an html conditional comment. This will just allow a fallback to the normal vbulletin code for users that use IE7 or less. Just an idea.


<!--[if lte IE 7]>
<script>
$(".popupmenu").hover(
function () {
$(this).find( '.popupbody' ).show();
},
function () {
$(this).find( '.popupbody' ).hide();
}
);
</script>
<![endif]-->

[thang28101993]

I do not use this mod but if it was me: For the 1% of users that use IE7 -- just use an html conditional comment. This will just allow a fallback to the normal vbulletin code for users that use IE7 or less. Just an idea.


<!--[if lte IE 7]>
<script>
$(".popupmenu").hover(
function () {
$(this).find( '.popupbody' ).show();
},
function () {
$(this).find( '.popupbody' ).hide();
}
);
</script>
<![endif]-->


Thanks so much for your idea! I added that script to footer but the issue still appaer!
https://vborg.vbsupport.ru/external/2013/04/7.jpg

another idea? Please!

Thanks!

[tbworld]

Your site URL?

[thang28101993]

Your site URL?

My site is buliding in local! Would you mind if you use TeamViewer to support for me?
TeamViewer ID:

I'm online now!

Thanks

[tbworld]

I answer questions in the forum to give back to the community. Assisting you privately does not accomplish that goal. Post your code fragments online, I will be happy to assist you here for "free" and others will be able to learn from the experience. :)

[bzcomputers]

I had a conflict with this mod and another custom mod I had which also uses jQuery. This may help some others that may have similar conflicts.

In order to get the two to both work I had to make a couple changes.

I needed to add this line below the current script in Step 1:
<script type="text/javascript"> jQuery.noConflict() </script>


Then replace all "$" with "jQuery" in Step 2 code to this:
<script type="text/javascript">
jQuery(".popupmenu").hover(
function () {
jQuery(this).find( '.popupbody' ).show();
},
function () {
jQuery(this).find( '.popupbody' ).hide();
}
);
</script>

[tbworld]

I had a conflict with this mod and another custom mod I had which also uses jQuery. This may help some others that may have similar conflicts.


Great, simple explanation as the official Jquery link http://api.jquery.com/jQuery.noConflict/ is a bit difficult for beginners to understand.

I use the encapsulation method all the time in inline jquery and misbehaving JavaScript, it adds a small amount of overhead, but I sleep well. :)

[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/articles/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]

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]

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]

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-should-let-google-host-jquery-for-you/. The article was originally written over 5 years ago, but recently updated just a month ago.

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

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