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

[FTG LIQUID CL]

Works with 4.1.12!

[Gio~Logist]

Originally Posted by FTG LIQUID CL

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]

Originally Posted by thang28101993

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]

Originally Posted by tbworld

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!


another idea? Please!

Thanks!

[tbworld]

Your site URL?

[thang28101993]

Originally Posted by tbworld

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]

Originally Posted by 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.

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.