Giving selected navigation tabs dropdown menus

[Dad.]

@Mike Creuzer all that I can say is that if you follow your own guide step-to-step you'll notice that it doesn't work on 1.4. Hope you can make the adjustments when you get some spare time. Thanks!

Sure thing.

 

[tonnyz]

Sure thing.

Great add-on, Mike

However, I can't get it work well while using "nodes as tabs" add-on (subforum existed)

as in my picture beneath, it shows a nicely sorted hierarchy of forum-subforum when was not clicked (selected)
v
v
v

but it soon be cracked apart when I hover on it AFTER I clicked one of the links listed on the dropdown

seems like the subforums of each forum make their own dropdown layer, leaving the forums list on the last dropdown layer
v
v
v

I think something must've gone wrong after a tab (with subforum arranged by "nodes as tabs") was selected (clicked), since the other tabs' dropdown remain nicely sorted as below
v
v
v

this is my navigation template portion
v
v
v

<!-- 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}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
       
       
                <div class="{xen:if {$extraTab.selected}, 'selectedMenu'} Menu JsOnly tabMenu {$extraTabId}TabLinks">
                    <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">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>

                    <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                </li>
            </xen:if>
        </xen:foreach>
        </xen:if>

Do you have any solution for this ?

Since I can't see my embedded screenshoot on my computer, I attached the screenshots too.

PS: I set my "nodes as tabs" as a "home-extra tabs"
PPS: I implemented this in XF 1.3.4

 

[Cao]

@Mike Creuzer could you please update this guide to work with 1.4?

With xenForo 1.4.x , you must add to EXTRA.css :

.navTabs .navTab.selected .navLink {
position: static!important;
}

It'll working



------
And to make for all tabs in navigation, you can find and replace all in template navigation , or use Template Modifications to do that:

Find: 'tabLinks', 'Menu JsOnly tabMenu'}
Replace all with: 'selectedMenu'} Menu JsOnly tabMenu

Find: 'selected', 'Popup PopupControl PopupClosed'}
Replace all with: 'selected'} Popup PopupControl PopupClosed

Add to EXTRA.css

.navTabs .navTab.selected .SplitCtrl {
display: block!important;
}
.navTabs .navTab.selected .navLink {
position: static!important;
}

 

[icratox]

With xenForo 1.4.x , you must add to EXTRA.css :

.navTabs .navTab.selected .navLink {
position: static!important;
}

It'll working



------
And to make for all tabs in navigation, you can find and replace all in template navigation , or use Template Modifications to do that:

Find: 'tabLinks', 'Menu JsOnly tabMenu'}
Replace all with: 'selectedMenu'} Menu JsOnly tabMenu

Find: 'selected', 'Popup PopupControl PopupClosed'}
Replace all with: 'selected'} Popup PopupControl PopupClosed

Add to EXTRA.css

.navTabs .navTab.selected .SplitCtrl {
display: block!important;
}
.navTabs .navTab.selected .navLink {
position: static!important;
}

That fixed it for me as well in xenforo 1.5. Thank you very much =)