Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
vBulletin Drop Downs on Hover (no click required) Details »
vBulletin Drop Downs on Hover (no click required)
Mod Version: 1.00, by Gio~Logist (Coder) Gio~Logist is offline
Developer Last Online: Apr 2021 I like it Show Printable Version Email this Page

vB Version: 4.2.0 Rating: (4 votes - 3.50 average) Installs: 26
Released: 20 Feb 2013 Last Update: Never Downloads: 0
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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Step 2
Go to your footer template and insert this at the bottom:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Download Now

Only licensed members can download files, Click Here for more information.

Screenshots

Click image for larger version

Name:	hoverdrop.jpg
Views:	259
Size:	52.2 KB
ID:	143864  

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • If you like this modification support the author by donating.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Similar Mod
Mod Developer Type Replies Last Post
Miscellaneous Hacks Adding drop downs with in drop downs blind-eddie vBulletin 3.7 Template Modifications 5 09 Aug 2008 02:04

  #31  
Old 23 Apr 2013, 00:34
CouponWCents CouponWCents is offline
 
Join Date: Jun 2011
Thanks so much! WOrks perfectly!!
Reply With Quote
  #32  
Old 28 Apr 2013, 18:02
Art Andrews Art Andrews is offline
 
Join Date: Jan 2005
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?
Reply With Quote
  #33  
Old 28 Apr 2013, 18:49
tbworld tbworld is offline
 
Join Date: Oct 2008
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.

Last edited by tbworld; 28 Apr 2013 at 19:07.
Reply With Quote
  #34  
Old 14 May 2013, 06:00
Art Andrews Art Andrews is offline
 
Join Date: Jan 2005
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.

Last edited by Art Andrews; 14 May 2013 at 06:06.
Reply With Quote
  #35  
Old 14 May 2013, 19:29
bzcomputers's Avatar
bzcomputers bzcomputers is offline
 
Join Date: Apr 2012
Originally Posted by Art Andrews View Post
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?
Reply With Quote
  #36  
Old 15 May 2013, 09:15
Art Andrews Art Andrews is offline
 
Join Date: Jan 2005
Originally Posted by bzcomputers View Post
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.
Reply With Quote
  #37  
Old 15 May 2013, 13:07
bzcomputers's Avatar
bzcomputers bzcomputers is offline
 
Join Date: Apr 2012
For those of you who may a little more guidance...

Replace this line:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

With something like this:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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.

Last edited by bzcomputers; 15 May 2013 at 16:30. Reason: Had issue with this code.
Reply With Quote
  #38  
Old 15 Aug 2013, 15:19
edrecovery edrecovery is offline
 
Join Date: Apr 2012
Real name: Rachel
Is there an easier way to do the hovermenu without editing code? I'm not good at editing code.

Last edited by edrecovery; 15 Aug 2013 at 17:01.
Reply With Quote
  #39  
Old 28 Jan 2015, 20:33
kemraj kemraj is offline
 
Join Date: Aug 2014
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.
Reply With Quote
  #40  
Old 28 Jan 2015, 23:54
bzcomputers's Avatar
bzcomputers bzcomputers is offline
 
Join Date: Apr 2012
Originally Posted by kemraj View Post
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)

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

OR

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


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.
Reply With Quote
  #41  
Old 29 Jan 2015, 04:35
kemraj kemraj is offline
 
Join Date: Aug 2014
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?
Reply With Quote
  #42  
Old 29 Jan 2015, 05:27
bzcomputers's Avatar
bzcomputers bzcomputers is offline
 
Join Date: Apr 2012
Originally Posted by kemraj View Post
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.
Reply With Quote
  #43  
Old 29 Jan 2015, 12:27
kemraj kemraj is offline
 
Join Date: Aug 2014
hmmm

Last edited by kemraj; 31 Jan 2015 at 03:58.
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 15:09.

Layout Options | Width: Wide Color: