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

Make entire nav tab trigger popup (instead of just the down arrow)

Makes it so you can mouse over any part of the tab and it will spawn the popup menu.

  1. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Jake Bunce submitted a new resource:

    Make entire nav tab trigger popup (instead of just the down arrow) (version 1.x) - Makes it so you can mouse over any part of the tab and it will spawn the popup menu.

    Read more about this resource...
     
  2. Digital Doctor

    Digital Doctor Well-Known Member

    +Core.
     
    HWS and erich37 like this.
  3. CyberAP

    CyberAP Well-Known Member

  4. JVCode

    JVCode Well-Known Member

    Awesome!
     
  5. gldtn

    gldtn Well-Known Member

    Nice! I decided to leave the <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>, IMO it worked good together ;)

    Jake, I hope you don't mind me adding to this :eek:

    Also if you want to make it act like the useraccount on the visitor tab, you can do something like this;

    Find:
    Code:
            <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                    <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>
    Replace:
    Code:
            <a href="{$extraTab.href}" class="navLink accountPopup" rel="Menu">{$extraTab.title}</a>
    Also, if you have TMS installed.. I recommend using it, as it will find all the popups with only one edit!
     
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I think you will find that the down arrow doesn't trigger the popup when you have both.
     
    gldtn and JVCode like this.
  7. JVCode

    JVCode Well-Known Member

    Correct.
     
    gldtn likes this.
  8. bogus

    bogus Guest

    Thanks for sharing this, maybe i missed something but i wont work for me...
    Here´s the changed Code i use with TMS
    PHP:
    <xen:edithint template="navigation.css" />
     
    <
    div id="navigation" class="pageWidth">
        <
    div class="pageContent">
            <
    nav>
     
    <
    div class="navTabs">
        <
    ul class="publicTabs">
       
            <!-- 
    home -->
            <
    xen:if is="{$showHomeLink}">
                <
    li class="navTab home PopupClosed"><a href="{$homeLink}class="navLink">{xen:phrase home}</a></li>
            </
    xen:if>
           
           
            <!-- 
    extra tabshome -->
            <
    xen:if is="{$extraTabs.home}">
            <
    xen:foreach loop="$extraTabs.home" key="$extraTabIdvalue="$extraTab">
                <
    xen:if is="{$extraTab.linksTemplate}">
                    <
    li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
               
                    <
    a href="{$extraTab.href}class="navLink NoPopupGadget" rel="Menu">{$extraTab.title}</a>
                    <
    div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">
                        <
    div class="primaryContent menuHeader">
                            <
    h3>{$extraTab.title}</h3>
                            <
    div class="muted">{xen:phrase quick_links}</div>
                        </
    div>
                        {
    xen:raw $extraTab.linksTemplate}
                    </
    div>
                </
    li>
                <
    xen:else />
                    <
    li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                    <
    a href="{$extraTab.href}class="navLink NoPopupGadget" rel="Menu">{$extraTab.title}</a>
                    <
    xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                    </
    li>
                </
    xen:if>
            </
    xen:foreach>
            </
    xen:if>
           
           
            <!-- 
    forums -->
            <
    xen:if is="{$tabs.forums}">
                <
    li class="navTab forums {xen:if $tabs.forums.selected, 'selected', 'Popup PopupControl PopupClosed'}">
               
                    <
    a href="{$tabs.forums.href}class="navLink">{$tabs.forums.title}</a>
                    <
    a href="{$tabs.forums.href}class="SplitCtrl" rel="Menu"></a>
                   
                    <
    div class="{xen:if {$tabs.forums.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">
                        <
    div class="primaryContent menuHeader">
                            <
    h3>{$tabs.forums.title}</h3>
                            <
    div class="muted">{xen:phrase quick_links}</div>
                        </
    div>
                        <
    ul class="secondaryContent blockLinksList">
                        <
    xen:hook name="navigation_tabs_forums">
                            <
    xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="OverlayTrigger">{xen:phrase mark_forums_read}</a></li></xen:if>
                            <
    xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></li></xen:if>
                            <
    xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li></xen:if>
                            <
    li><a href="{xen:link 'find-new/threads'}">{xen:phrase whats_new}</a></li>
                        </
    xen:hook>
                        </
    ul>
                    </
    div>
                </
    li>
            </
    xen:if>
           
           
            <!-- 
    extra tabsmiddle -->
            <
    xen:if is="{$extraTabs.middle}">
            <
    xen:foreach loop="$extraTabs.middle" key="$extraTabIdvalue="$extraTab">
                <
    xen:if is="{$extraTab.linksTemplate}">
                    <
    li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
               
                    <
    a href="{$extraTab.href}class="navLink NoPopupGadget" rel="Menu">{$extraTab.title}</a>           
                    <
    div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">
                        <
    div class="primaryContent menuHeader">
                            <
    h3>{$extraTab.title}</h3>
                            <
    div class="muted">{xen:phrase quick_links}</div>
                        </
    div>
                        {
    xen:raw $extraTab.linksTemplate}
                    </
    div>
                </
    li>
                <
    xen:else />
                    <
    li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                    <
    a href="{$extraTab.href}class="navLink NoPopupGadget" rel="Menu">{$extraTab.title}</a>
                    <
    xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                    </
    li>
                </
    xen:if>
            </
    xen:foreach>
            </
    xen:if>
           
           
            <!-- 
    members -->
            <
    xen:if is="{$tabs.members}">
                <
    li class="navTab members {xen:if $tabs.members.selected, 'selected', 'Popup PopupControl PopupClosed'}">
               
                    <
    a href="{$tabs.members.href}class="navLink">{$tabs.members.title}</a>
                    <
    a href="{$tabs.members.href}class="SplitCtrl" rel="Menu"></a>
                   
                    <
    div class="{xen:if {$tabs.members.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">
                        <
    div class="primaryContent menuHeader">
                            <
    h3>{$tabs.members.title}</h3>
                            <
    div class="muted">{xen:phrase quick_links}</div>
                        </
    div>
                        <
    ul class="secondaryContent blockLinksList">
                        <
    xen:hook name="navigation_tabs_members">
                            <
    li><a href="{xen:link members}">{xen:phrase registered_members}</a></li>
                            <
    li><a href="{xen:link online}">{xen:phrase current_visitors}</a></li>
                            <
    xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link recent-activity}">{xen:phrase recent_activity}</a></li></xen:if>
                        </
    xen:hook>
                        </
    ul>
                    </
    div>
                </
    li>
            </
    xen:if>       
           
            <!-- 
    help -->
            <
    xen:if is="{$tabs.help}">
                <
    li class="navTab help {xen:if $tabs.help.selected, 'selected', 'Popup PopupControl PopupClosed'}">
               
                    <
    a href="{$tabs.help.href}class="navLink" rel="help">{$tabs.help.title}</a>
                    <
    a href="{$tabs.help.href}class="SplitCtrl" rel="Menu"></a>
                   
                    <
    div class="{xen:if {$tabs.help.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">
                        <
    div class="primaryContent menuHeader">
                            <
    h3>{$tabs.help.title}</h3>
                            <
    div class="muted">{xen:phrase quick_links}</div>
                        </
    div>
                        <
    ul class="secondaryContent blockLinksList">
                        <
    xen:hook name="navigation_tabs_help">
                            <
    li><a href="{xen:link help/smilies}">{xen:phrase smilies}</a></li>
                            <
    li><a href="{xen:link help/bb-codes}">{xen:phrase bb_codes}</a></li>
                            <
    li><a href="{xen:link help/trophies}">{xen:phrase trophies}</a></li>
                            <
    li><a href="{xen:link help/cookies}">{xen:phrase cookie_usage}</a></li>
                        </
    xen:hook>
                        </
    ul>
                    </
    div>
                </
    li>
            </
    xen:if>
           
           
            <!-- 
    extra tabsend -->
            <
    xen:if is="{$extraTabs.end}">
            <
    xen:foreach loop="$extraTabs.end" key="$extraTabIdvalue="$extraTab">
                <
    xen:if is="{$extraTab.linksTemplate}">
                    <
    li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
               
                    <
    a href="{$extraTab.href}class="navLink NoPopupGadget" rel="Menu">{$extraTab.title}</a>
                   
                    <
    div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">
                        <
    div class="primaryContent menuHeader">
                            <
    h3>{$extraTab.title}</h3>
                            <
    div class="muted">{xen:phrase quick_links}</div>
                        </
    div>
                        {
    xen:raw $extraTab.linksTemplate}
                    </
    div>
                </
    li>
                <
    xen:else />
                    <
    li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                    <
    a href="{$extraTab.href}class="navLink NoPopupGadget" rel="Menu">{$extraTab.title}</a>                    <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                    </
    li>
                </
    xen:if>
            </
    xen:foreach>
            </
    xen:if>
           
           
            <!-- 
    no selection -->
            <
    xen:if is="!{$selectedTab}">
                <
    li class="navTab selected"><div class="tabLinks"></div></li>
            </
    xen:if>
           
        </
    ul>
       
        <
    xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if>
    </
    div>
     
    <
    span class="helper"></span>
               
            </
    nav>   
        </
    div>
    </
    div>
     
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Looks good. Though you only applied the changes to the extraTabs skeletons which means it will only affect tabs for addons, not the default tabs.
     
    bogus and gldtn like this.
  10. gldtn

    gldtn Well-Known Member

    In TMS, find:
    Code:
            <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                    <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>
    Replace:
    Code:
            <a href="{$extraTab.href}" class="navLink NoPopupGadget" rel="Menu">{$extraTab.title}</a>
    trigger-TMS.jpg

    Verify that TMS applied to the template
     
    bogus likes this.
  11. Kintaro

    Kintaro Well-Known Member

    I got something wrong with TMS...

    If I click on diff I can see that differences are ok:

    errore_tms.jpg

    errore_tms_02.jpg
     
  12. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Bleh... TMS. Always complicating things. I provided exact code changes, but it can't be generalized to a single string replacement because different tabs have slightly different code.

    That TMS replacement doesn't match all tabs within that template. You are only matching the extraTabs which will affect addons but not the default tabs (Forums, Members, Help). To quote the resource:

    There isn't a single string replacement to match all tabs within the navigation template. That's why I provided specific code changes so you can apply them to other tabs.

    The Preg Replace option in the TMS should work if you create a regex for this. That would allow you to match all tabs which have similar but different code.

    People who aren't using the TMS can ignore all of this. Just edit the template directly using the instructions posted in the resource.
     
    Tracy Perry and erich37 like this.
  13. Kintaro

    Kintaro Well-Known Member

    I missed the "similar code" thing.
    I'm going to try with a regex.

    Thank you Jake.
     
  14. Neil E.

    Neil E. Active Member

    Or if you are a TMS groupie like me you can just create a TMS modification for each tab that you have.

    search:
    replace:
    In my case I don't use the Home tab or the Help tab so I didn't do them.
    I can add a mod for extra tabs if I add them later on.



    ® Tweaks by Jake ©
     
  15. Forsaken

    Forsaken Well-Known Member

    Now everyone is going to do this :(.

    This has been a feature of my style framework/Imperial style for about 6 months now.
     
  16. Andy.N

    Andy.N Well-Known Member

    Can anyone provide a screenshot of before/after? Not entirely clear what this does.
     
  17. Neil E.

    Neil E. Active Member

    Hover over the Members tab on this support forum. Nothing happens. Hover over the down arrow and you get the drop down.

    After the mod, the down arrow is gone. Hover over the Members tab now and you get the drop down.

    Same function as before, just a larger target to land on. Apply it to one or more tabs as you need it.
     
    Andy.N likes this.
  18. Forsaken

    Forsaken Well-Known Member

    Andy.N likes this.
  19. ArnyVee

    ArnyVee Well-Known Member

    Jake, it seems like once you mouse over one of the tabs, the popup menu comes up. Which is a good thing. But, then the popup menu stays there until you mouseover to another menu option. Is this the expected action or have I missed something?
     
  20. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    That is the default behavior for popups. This template modification doesn't change that.
     
    erich37 likes this.

Share This Page