1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to place navigation tab menu right in this tab?

Discussion in 'XenForo Questions and Support' started by CyberAP, Apr 24, 2012.

  1. CyberAP

    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?
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    This is a little unclear to me. What code are you using where? And what effect are you trying to achieve?
     
  3. CyberAP

    CyberAP Well-Known Member

    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).
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
  5. CyberAP

    CyberAP Well-Known Member

    When I say in html I mean in the solid output code. Here are the screenshots:

    scr1.PNG
    Here is the tab.

    scr2.PNG

    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.
     
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    That appears to be modified. It's not like that on xenforo.com or on my forum. Can you confirm this problem here on xenforo.com?
     
  7. CyberAP

    CyberAP Well-Known Member

    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.
     
    StRonK likes this.
  8. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
    CyberAP likes this.
  9. CyberAP

    CyberAP Well-Known Member

    Anyway thanks for the help. I'll post a solution once it's found.
     

Share This Page