Modified Xenforo.js to allow for menu autoclose... needs more ketchup.


Well-known member
I know others are looking for this but its not straight forward. I have removed the split controls because I want every tab to drop down if it has one. However this means balancing the drop down time to be slow enough to have no accidents but fast enough that a click on the navtab will actually trigger the link. You might not know this if you never removed the split control but a click on tab that is opening will result in going nowhere.

The idea is to implement auto closes so that you can set the interval to 0 and no have any complaints about menu's staying on the screen. Its not for everyone but some of us like the idea.

Xenforo uses HoverIntent for its menu's and does not define an "out". This means only other events call Xenforo's intended code for closing menu's. Those events are say when another menu is opened or the user clicks on the document elsewhere.

The trouble I am having is it seems once the out event is fired on the first arrival of time out, it will never fire again. I am not sure if hover intent is expecting a return value to let it know to not clear the timeout from the object or if it implements nothing and are screwed?

The code changes look like this:
XenForo.isTouchBrowser() || this.$clicker.mouseover(c.context(this, "controlHover")).hoverIntent({
                sensitivity: 1,
                interval: 10,
                timeout: 1000,
                over: c.context(this, "controlHoverIntent"),
                out: c.context(this, "checkifstillhover")
out: c.context(this, "checkifstillhover")

The function:
checkifstillhover: function (a, b) {
            if (!(this.$":hover"))) {this._hideMenu(a, !b)}
When the out event fires from hoverintent if the mouse is over the menu it will not close. If it is not then it will close. Exactly what we want. Except that once we move off the nav tab on to the menu we lose the ability to have it autoclose from just those changes alone.

With a short time out this works if the user doesn't ever have the mouse enter the menu area say going up, left or right. Going down risks the event firing and never again, meaning were back to square one. A longer time out say 1 second (1000ms) allows the user to pass over the menu accidently a little more safely but still not perfect.

Video 10ms timeout:

Video 1000ms timeout:

But if we can keep the time out event going like it would when your still over the element hoverintent is assigned to for the menu open, it will work perfectly. Is this possible or do we need to keep track of the timeout ourselves?

Unfortunately I am new to javascript, jquery and of course the rest of the plugins we are using such as hoverintent.
Last edited:


Active member
Exactly what I have been looking to accomplish as well, auto close the menus, alot of my members do not like when they hover over a menu and it will not close till they click elsewhere on the page or call another action,

Any one have any other ideas or best way to accomplish as per what @rainmotorsports described above ?


Well-known member
Well i found one problem with this rather crude solution so far and that was with the long 1 second time out, moving menu to menu to menu left to right to see each menu sometimes every other one won't open. The solution is just rather hacky.

My next try was instead of actually allowing the NavTab hoverIntent to do the out procedure is to have another hoverIntent for the Menu itself. This way if the cursor leaves the menu area it calls its own close. I think its probably still going to be missing something to work perfectly but its worth a try for giggles.

I will let you know.


Well-known member
Looking forward to your solution, hoping others might jump in and help out soon. I know that my members will start complaining about the menus staying open.