How to place navigation tab menu right in this tab?

CyberAP

Well-known member
I'm having a bit trouble with menus in XenForo. I want my menus in the navigation to open when I hover on the tab. Of course it could be done by just setting width of the .splitCtrl to 100%, but this will result in 1 second latency when I hover on the tab, so I won't be able to immediately click that link. So I decided to just take this menu div right into this tab like it is in the template. One thing I don't know is how is it removed from the final html, I suppose it is javascript. Is there any way to get it back?
 
Well, the template is 'navigation' and I want the code
Code:
<div class="{xen:if {$tabs.forums.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">
...
</div>
inside each tab to appear in final html right where it is in the template, so I won't need my .arrowWidget anymore, because it causes lag on clicking. The idea is to show tabLinks when I hover on the tab. It can be achieved by placing tabLinks right where they should be, or by calling them when I hover the tab itself (I guess it is a better way, but needs some js skills).
 
The secondary links underneath each tab are always in the HTML, but the usage is different depending on if the tab is selected. That is why the condition for the CSS class names.

The hover menu only works when the tab is not selected.
 
When I say in html I mean in the solid output code. Here are the screenshots:

scr1.webp
Here is the tab.

scr2.webp

And here is the tabLinks. As you see tabLinks is not in the same place as the tab. That's why I can't get rid of .splitCtrl to show tabLinks only with css.
 
It is not modified, same as in the default style, I just opened the tab. It is not a problem, it works as designed, but I want it to work on my way. For me the main problem is the latency when you hover on a tab with .splitCtrl on full width. XenForo waits until the links are loaded (or some js code executes) and only then you can click on a tab to go to the tab page (Members in example).

You can try it yourself, here is CSS:
body .navTabs .navTab.PopupClosed .SplitCtrl
{
width: 100%;
margin-left: -100%;
}

and try to click on a tab immediately after hovering it. You won't be able to do that, because XenForo loads something. I tried everything: moving class and rel to .navLink, setting splitCtrl class with navLink, but it all resulted in the same latency. The only answer I found was placing tabLinks right in the tab. I just renamed .Menu class. But this is not a good solution and I really would love to found a good one.
 
That delay is probably in the javascript somewhere. I remember looking for that in the js files once before but I was unable to find it. Maybe some one else knows where it is.
 
Top Bottom