XF 1.2 Struggling with secondary navigation drop-down

[Live Free]

How can I add a drop-down menu to the secondary navigation tab (displayed when a parent tab is selected)?

I've tried and searched, but haven't had any luck. Trying to mimic what I get automatically when using the nodes as tabs plugin (see attachment). I'm trying to do the same but with custom links.



I suspect I'm using the incorrect classes. (Popup PopupControl PopupContainerControl PopupOpen for the li class as the main secondary menu link and "secondaryContent blockLinksList" for the lower ul class. No luck. I'm not sure how I can find the right classes - already tried finding it by using "Inspect Element" in Chrome. Can anyone shed light on this?

 

[Jake Bunce]

With NodesAsTabs you can specify a custom links template for the node tab. But that only helps with "regular" secondary links, not submenus. With submenus you need to change the output depending on if the tab is selected or not. If you use nodes to create the links then the addon automatically handles that complexity. Doing this manually with a custom links template is going to be messy and may require some hacking. I recommend against this.

I suggest staying with nodes to create submenus in your navigation. Otherwise submenus aren't really supported by XenForo's nav system.

 

[Live Free]

With NodesAsTabs you can specify a custom links template for the node tab. But that only helps with "regular" secondary links, not submenus. With submenus you need to change the output depending on if the tab is selected or not. If you use nodes to create the links then the addon automatically handles that complexity. Doing this manually with a custom links template is going to be messy and may require some hacking. I recommend against this.

I suggest staying with nodes to create submenus in your navigation. Otherwise submenus aren't really supported by XenForo's nav system.

Thanks Jake. I'd prefer manually but if I can get the same effect this way I suppose I can deal with it. I'm having a little trouble though. I'm trying to add the secondary drop-down menu to the community index page (and all forums). I've been able to add a link as a tab in the main menu (as link forums), but can't figure out how to do it on the index/all forums.

Shouldn't this be possible?

P.S. - how might I edit the css for the drop down menus added automatically from NodesAsTabs?

 

[Jake Bunce]

Thanks Jake. I'd prefer manually but if I can get the same effect this way I suppose I can deal with it. I'm having a little trouble though. I'm trying to add the secondary drop-down menu to the community index page (and all forums). I've been able to add a link as a tab in the main menu (as link forums), but can't figure out how to do it on the index/all forums.

This is unclear to me. The addon adds navigation tabs. Those appear in the navbar which appears on all pages.

P.S. - how might I edit the css for the drop down menus added automatically from NodesAsTabs?

Everything has a CSS class you can select on. Submenus have depth classes.

 

[Live Free]

Hey Jake,

I'm attempting to add subnavigation view the NodesAsTabs plugin as you suggested in your original response. I'm creating link nodes for the secondary menu drop-down. Using this method the node link list appears as a secondary menu when I add the node to an existing forum tab. However, I'd like to do this on the forum index page - the community tab.

Edit: to charlify, I'm trying to make it show as a secondary menu list on the index page and all forum pages.

Regarding the css, I was wondering if you new off-hand where to find those CSS classes - I assume it's a separate CSS file for the add-on?

 

[Jake Bunce]

That is not supported by this addon. Adding secondary links to existing non-node tabs (not controlled by this addon) is going to be a template edit. You need to edit the navigation template where the default Forums tab is defined.

All CSS classes can be seen in the source code. If you need help with the CSS then I need a specific question so I can provide code.

 

[Live Free]

That is not supported by this addon. Adding secondary links to existing non-node tabs (not controlled by this addon) is going to be a template edit. You need to edit the navigation template where the default Forums tab is defined.

All CSS classes can be seen in the source code. If you need help with the CSS then I need a specific question so I can provide code.

That's what I was afraid of, meaning I will have to do it manually, which brings me back to my first post.

I've more or less got it - I'm making progress anyway. I still need to edit the CSS, but using this code in the navigation template I've managed to add a secondary-drop down.



Here's the relevant part of the navigation template (for others trying to do this as well, and hopefully to help with the problem below):

        <!-- 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">Community</a>
             
                <div class="{xen:if {$tabs.forums.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} forumsTabLinks">
                    <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/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>
                        <li class="Popup PopupControl PopupContainerControl"><a href="#" rel="Menu">Parent</a>
                        <div class="Menu JsOnly tabMenu">'
                               <ul class="secondaryContent blockLinksList">
                                  <li><a href="#" class="natMenuLevel0">Child 1</a></li>
                                          <li><a href="#" class="natMenuLevel0">Child 2</a></li>
                                  <li><a href="#" class="natMenuLevel0">Child 2</a></li>
                               </ul>
                               </div>
                               </li>
                                                                                       
                    </xen:hook>
                    </ul>

                 

                                 

                </div>
            </li>
        </xen:if>

My problem is this: I'm now seeing two drop-down menus from the same parent (Community) navtab. See the attachment.



I suspect this has to do with a particular class, or I need to restructure the surrounding divs. Any tips?

Edit:

I suspect it has to do with this div or classes within it:

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

 

[Jake Bunce]

As I said, XenForo's nav system doesn't really support submenus in the nav. Submenus under nav tabs require you to change the output depending on if the tab is selected in order to avoid conflicts with the menus. The submenu code should only be present when the tab is selected.

 

[Live Free]

As I said, XenForo's nav system doesn't really support submenus in the nav. Submenus under nav tabs require you to change the output depending on if the tab is selected in order to avoid conflicts with the menus. The submenu code should only be present when the tab is selected.

I understand this. This is the case in that it only shows when

    <xen:if is="{$tabs.forums}">

Regardless of XF is built for it, I need drop-down submenus. I'm very close. I just need to isolate what class is causing the drop-down from the main tab, forcing it to show twice. I'm just looking for a little CSS/structuring help.

 

[Jake Bunce]

Use this as a code example with and without submenus. Look at the Tools menu when it's selected versus not:

https://tools.digitalpoint.com/
https://forums.digitalpoint.com/

				<li class="navTab tools selected">
			
				<a href="//tools.digitalpoint.com/" class="navLink" accesskey="t">Tools</a>
				<a href="//tools.digitalpoint.com/" class="SplitCtrl" rel="Menu"></a>
				
				<div class="tabLinks toolsTabLinks">
					<div class="primaryContent menuHeader">
						<h3>Tools</h3>
						<div class="muted">Quick Links</div>
					</div>
					<ul class="secondaryContent blockLinksList">

	<li class="Popup PopupControl PopupClosed">
		<a rel="Menu">Programming</a>
		<div class="Menu JsOnly tabMenu">
			<ul class="secondaryContent blockLinksList">					
				<li><a href="//tools.digitalpoint.com/base64">Base64 Encode/Decode</a></li>
				<li><a href="//tools.digitalpoint.com/diff">Diff</a></li>
				<li><a href="//tools.digitalpoint.com/image-convertor">Image Convertor</a></li>
				<li><a href="//tools.digitalpoint.com/urlencoder">URL Encoder/Decoder</a></li>
			</ul>
		</div>
	</li>


	<li class="Popup PopupControl PopupClosed">
		<a rel="Menu">Query</a>
		<div class="Menu JsOnly tabMenu">
			<ul class="secondaryContent blockLinksList">
				<li><a href="//tools.digitalpoint.com/adsense-sandbox">AdSense Sandbox</a></li>
				<li><a href="//tools.digitalpoint.com/cookie-search">Cookie Search</a></li>
				<li><a href="//tools.digitalpoint.com/dns">DNS Lookup</a></li>
				<li><a href="//tools.digitalpoint.com/zone-transfer">DNS Zone Transfer</a></li>
				<li><a href="//tools.digitalpoint.com/exif">EXIF Reader</a></li>
				<li><a href="//tools.digitalpoint.com/geo">Geolocation</a></li>
				<li><a href="//tools.digitalpoint.com/headers">HTTP Headers</a></li>
				<li><a href="//tools.digitalpoint.com/pagerank">PageRank</a></li>
				<li><a href="//tools.digitalpoint.com/whois">WHOIS</a></li>
			</ul>
		</div>
	</li>


	<li class="Popup PopupControl PopupClosed">
		<a rel="Menu">Statistical</a>
		<div class="Menu JsOnly tabMenu">
			<ul class="secondaryContent blockLinksList">
				<li><a href="//tools.digitalpoint.com/analytics-charts">Analytics Charts</a></li>
				<li><a href="//tools.digitalpoint.com/analytics-globe">Analytics Globe</a></li>
				<li><a href="//tools.digitalpoint.com/geovisitors">Geo Visitors</a></li>
				<li><a href="//tools.digitalpoint.com/counter">Hit Counter</a></li>
				<li><a href="//tools.digitalpoint.com/tracker">Keyword Ranking Tracker</a></li>
			</ul>
		</div>
	</li>

	<li><a href="//tools.digitalpoint.com/css-compressor">CSS Minify</a></li>
	<li><a href="//tools.digitalpoint.com/javascript-compressor">JavaScript Minify</a></li>
	<li><a href="//tools.digitalpoint.com/site-search">Site Search</a></li>



	<li class="Popup PopupControl PopupClosed legacy">
		<a rel="Menu">Legacy</a>
		<div class="Menu JsOnly tabMenu legacyMenu">
			<ul class="secondaryContent blockLinksList">					
				<li><a href="//tools.digitalpoint.com/adsense-charts">AdSense Charts</a></li>
				<li><a href="//tools.digitalpoint.com/filemaker-server-probe">FileMaker Server Probe</a></li>
				<li><a href="//tools.digitalpoint.com/filemaker-digger">FileMaker XML Digger</a></li>
				<li><a href="//tools.digitalpoint.com/phone-home">Phone Home</a></li>
				<li><a href="//tools.digitalpoint.com/suggestion">Keyword Suggestion Tool</a></li>
				<li><a href="//tools.digitalpoint.com/webrank">Yahoo Web Rank</a></li>
				<li><a href="//tools.digitalpoint.com/donors">Donors</a></li>
			</ul>
		</div>
	</li>

</ul>
				</div>
			</li>

				<li class="navTab tools Popup PopupControl PopupClosed">
			
				<a href="//tools.digitalpoint.com/" class="navLink" accesskey="t">Tools</a>
				<a href="//tools.digitalpoint.com/" class="SplitCtrl" rel="Menu"></a>
				
				<div class="Menu JsOnly tabMenu toolsTabLinks">
					<div class="primaryContent menuHeader">
						<h3>Tools</h3>
						<div class="muted">Quick Links</div>
					</div>
					<div class="secondaryContent">
	<div class="muted">Most used tools...</div>
</div>

<ul class="secondaryContent blockLinksList">
	<li><a href="//tools.digitalpoint.com/tracker">Historical Rank/Link Tracker</a></li>
	<li><a href="//tools.digitalpoint.com/geovisitors">Geo Visitors</a></li>
	<li><a href="//tools.digitalpoint.com/site-search">Site Search Engine</a></li>
</ul>
				</div>
			</li>

The submenus are completely removed when the tab is not selected.

 

[Live Free]

Use this as a code example with and without submenus. Look at the Tools menu when it's selected versus not:

https://tools.digitalpoint.com/
https://forums.digitalpoint.com/
The submenus are completely removed when the tab is not selected.

Hey Jake, sorry if I'm being a bit dense. Having submenus completely removed when the tab isn't selected is a good thing - how it should operate, right? That's what I'm going for, and in the navigation template the changes are under the XF if statement of is {$tabs.forums}, giving this effect, so I don't really see the issue.

I did manage to get the effect I'm looking for (right before you posted, didn't get a chance to look at that code). Drop-down secondary menus without a duplicate drop-down menu from the parent tab. I'm not so sure it's the most efficient way to do this, but it seems to work.

I had to duplicate a large part of the menu so there's a separate list for those acting as a drop-down from the main tab and those acting as the secondary link when the tab is selected. In the duplicated portion I removed the Popup and PopupControl classes, which enables it to act as a secondary menu list when the tab is selected but doesn't Popup the drop-down menu from the parent tab. Color-coded below.

Edit: looks like removing the popup and popupcontrol classes had nothing to do with it, rather it's just the duplication of the list so one acts as the submenu list and one acts as the drop-down for the primary forum tab.

        <!-- forums -->
        <xen:if is="{$tabs.forums}">
            <li class="navTab forums {xen:if $tabs.forums.selected, 'selected', 'Popup PopupControl PopupClosed'}">

<!-- drop-down ONLY menu from main forums tab, does not display as secondary menu -->
                <a href="{$tabs.forums.href}" class="navLink NoPopupGadget" rel="Menu">Community</a>
           
                <div class="{xen:if {$tabs.forums.selected}, 'tabLinks','Menu JsOnly tabMenu' } forumsTabLinks">
                    <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/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>
       
                        <li class="navTab forums {xen:if $tabs.forums.selected, 'selected', 'PopupClosed'}">
<!-- secondary sub-menu when tab is selected only, does not add drop-down menu to parent top level tab  -->
                        
                <div class="{xen:if {$tabs.forums.selected}, 'tabLinks','Menu JsOnly tabMenu' } forumsTabLinks">
                    <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>
                                                 
                        <li class="Popup PopupControl PopupContainerControl"><a href="#" rel="Menu">Parent</a>
                        <div class="Menu JsOnly tabMenu">'
                               <ul class="secondaryContent blockLinksList">
                                  <li><a href="#" class="natMenuLevel0">Child 1</a></li>
                                          <li><a href="#" class="natMenuLevel0">Child 2</a></li>
                                  <li><a href="#" class="natMenuLevel0">Child 2</a></li>
                               </ul>
                               </div>
                               </li>
                                                                                   
                    </ul>

             

                </div>
            </li>
        </xen:if>

Any glaring conflict with doing it this way? Seems to work perfectly.

P.S. - Is there no way to make certain parts of the code stand out? The relevant parts were supposed to be in red. Also tried bolding and italicizing, but no luck.

 

[Paul B]

P.S. - Is there no way to make certain parts of the code stand out? The relevant parts were supposed to be in red. Also tried bolding and italicizing, but no luck.

Use code=rich.