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

[Jake Bunce]

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.

Edit this template:

Admin CP -> Appearance -> Templates -> navigation

Add the blue, remove the red:

		<!-- extra tabs: end -->
		<xen:if is="{$extraTabs.end}">
		<xen:foreach loop="$extraTabs.end" key="$extraTabId" value="$extraTab">
			<xen:if is="{$extraTab.linksTemplate}">
				<li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
			
				<a href="{$extraTab.href}" class="navLink...

Read more about this resource...

 

[Digital Doctor]

+Core.

 

[CyberAP]

This goes good with this: http://xenforo.com/community/resources/remove-delay-from-navigation-popup.693/
Otherwise you'll get a delay before you'll be able to click on a tab link.

 

[JVCode]

Awesome!

 

[gldtn]

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

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

Find:

        <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>

Replace:

        <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!

 

[Jake Bunce]

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

I think you will find that the down arrow doesn't trigger the popup when you have both.

 

[JVCode]

I think you will find that the down arrow doesn't trigger the popup when you have both.

Correct.

 

[bogus]

Thanks for sharing this, maybe i missed something but i wont work for me...
Here´s the changed Code i use with TMS

<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 tabs: home -->
        <xen:if is="{$extraTabs.home}">
        <xen:foreach loop="$extraTabs.home" key="$extraTabId" value="$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 tabs: middle -->
        <xen:if is="{$extraTabs.middle}">
        <xen:foreach loop="$extraTabs.middle" key="$extraTabId" value="$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 tabs: end -->
        <xen:if is="{$extraTabs.end}">
        <xen:foreach loop="$extraTabs.end" key="$extraTabId" value="$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>

 

[Jake Bunce]

Thanks for sharing this, maybe i missed something but i wont work for me...
Here´s the changed Code i use with TMS

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.

 

[gldtn]

Thanks for sharing this, maybe i missed something but i wont work for me...
Here´s the changed Code i use with TMS

<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 tabs: home -->
        <xen:if is="{$extraTabs.home}">
        <xen:foreach loop="$extraTabs.home" key="$extraTabId" value="$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 tabs: middle -->
        <xen:if is="{$extraTabs.middle}">
        <xen:foreach loop="$extraTabs.middle" key="$extraTabId" value="$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 tabs: end -->
        <xen:if is="{$extraTabs.end}">
        <xen:foreach loop="$extraTabs.end" key="$extraTabId" value="$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>

In TMS, find:

        <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>

Replace:

        <a href="{$extraTab.href}" class="navLink NoPopupGadget" rel="Menu">{$extraTab.title}</a>

Verify that TMS applied to the template

 

[Kintaro]

I got something wrong with TMS...

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

 

[Jake Bunce]

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:

You need to apply this change to all of the tabs in this template. There is similar code in this template for all of the default tabs, as well as for each "extraTabs" skeleton which addons use to create their tabs.

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.

 

[Kintaro]

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

Thank you Jake.

 

[Neil E.]

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

navigation bar popup for members tab

search:

<a href="{$tabs.members.href}" class="navLink">{$tabs.members.title}</a>
<a href="{$tabs.members.href}" class="SplitCtrl" rel="Menu"></a>

replace:

<a href="{$tabs.members.href}" class="navLink NoPopupGadget" rel="Menu">{$tabs.members.title}</a>

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 ©™

 

[Forsaken]

Now everyone is going to do this .

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

 

[Andy.N]

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

 

[Neil E.]

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.

 

[Forsaken]

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

http://support.tapatalk.com/

 

[ArnyVee]

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?

 

[Jake Bunce]

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?

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