Giving selected navigation tabs dropdown menus

[NeoCHI]

I understand that but as Russ mentioned earlier I'm using xenPorta so the home code doesn't seem to live in the navigation template anymore.

 

[Dad.]

Yes but I think xenPorta uses the extra tab part. Which this tutorial says to cover.

 

[Matthew Hawley]

I am having a lot of trouble doing this!

 

[Dad.]

I am having a lot of trouble doing this!

Like what?

 

[Matthew Hawley]

I made all the changes and it won't work.

This is all the code for the navtabs.

<xen:edithint template="navigation.css" />

<div class="navWrapper">
<div id="navigation" class="pageWidth {xen:if $canSearch, withSearch}">
	<div class="pageContent">
		<nav>

<div class="navTabs">
	<ul class="publicTabs">
		<li class="navTab">
			<div id="logo"><a href="{$logoLink}">
				<span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
				<img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />
				</a>
			</div>
		</li>
		<!-- 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}<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}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
					
					{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}</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 NoPopupGadget" rel="Menu">{$tabs.forums.title}</a>
				
				<div class="{xen:if {$tabs.forums.selected}, 'selectedMenu'} Menu JsOnly tabMenu">
					
					<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/forums'}">{xen:phrase watched_forums}</a></li>
							<li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li>
						</xen:if>
						<li><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</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}<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}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
				
					{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}</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}, 'selectedMenu'} 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 notable_members}</a></li>
						<xen:if is="{$xenOptions.enableMemberList}"><li><a href="{xen:link members/list}">{xen:phrase registered_members}</a></li></xen:if>
						<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>					
		
		<!-- 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}<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}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
					
					{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}</a>
					<xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
				</li>
			</xen:if>
		</xen:foreach>
		</xen:if>

		<!-- responsive popup -->
		<li class="navTab navigationHiddenTabs Popup PopupControl PopupClosed" style="display: none;">	
						
			<a rel="Menu" class="navLink NoPopupGadget"><span class="menuIcon">{xen:phrase menu}</span></a>
			
			<div class="Menu JsOnly blockLinksList primaryContent"></div>
		</li>
			
		
		<!-- 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>
</div>

 

[Dad.]

It looks to me like you only did the tutorial on the middle tab, you need to do it to ALL tabs,
extraTabs.end, tabs.members, .tabs.forums, all of em.

 

[Matthew Hawley]

I did it on the members tab to see if it would work first. It didn't.

 

[Russ]

@Matthew Hawley you should follow the tutorial to the end, you still didn't edit this correctly:

<div class="{xen:if {$tabs.members.selected}, 'selectedMenu'} tabLinks Menu JsOnly tabMenu">

 

[Dad.]

^^ As Russ said.

 

[Matthew Hawley]

@Matthew Hawley you should follow the tutorial to the end, you still didn't edit this correctly:

<div class="{xen:if {$tabs.members.selected}, 'selectedMenu'} tabLinks Menu JsOnly tabMenu">

Still doesn't work.

 

[Matthew Hawley]

Can someone who has gotten this working post the full code here?

 

[Dad.]

Can someone who has gotten this working post the full code here?

Well I didn't post the full code since there are a few ways to do this, but I think I might be able to come up with something.

 

[Matthew Hawley]

Well I didn't post the full code since there are a few ways to do this, but I think I might be able to come up with something.

Big life saver (if it works).

 

[Matthew Hawley]

Can someone please post their code? ;( I can't get it to work whatsoever. I'm going nuts!

 

[Matthew Hawley]

OH MY GOD I GOT IT WORKING!!!

 

[imthebest]

I have tried hard to get this working on 1.4 but I'm unable to achieve the goal
I have done everything up to this line:

Here is where you split paths, whichever you may choose remember to not add any of the changes from the opposite method.

But it's not working. Selected tabs don't show drop-down menus.

Could you please update this to work with 1.4?

 

[imthebest]

@Audentio hope you can help me with this when you get some free time... it looks like this no longer works with the stock theme of 1.4

 

[imthebest]

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

 

[Dad.]

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

Hi there,

Im using it on 1.4 now. But Ill see if I can tweak it to make sure it works more with 1.4 (if there are indeed things that need to be changed, not sure at the moment).

 

[imthebest]

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