Giving selected navigation tabs dropdown menus

Giving selected navigation tabs dropdown menus

Dad.

Well-known member
Audentio submitted a new resource:

Giving selected navigation tabs dropdown menus (version 1.0) - A different navigation experience

Hello everyone,

This tutorial will help show you how to setup your XenForo navigation to allow dropdowns on all tabs and it is mainly for skins that want to heavily customize, clear up space in the header, or just want to stand out from the rest. By default, XenForo chooses to display the current tab without a menu and displays the contents of that menu inside the 'tabLinks' class, like so:

View attachment 26377

When you hover over unselected tabs, a menu will display, but this is...

Read more about this resource...
 
Does this work only for the forum tab Mike or does it also work for the others in the nav as well?
 
Hi a good tutorial. All codes have adapted only at Personal Details is not right!
See picture, please help!

navigation.png


My Templates,
navigation:
http://pastebin.com/6T2h7Bf2

navigation_visitor_tabs:
http://pastebin.com/5CBtRXqp
 
Hey there!

Well, the member dropdown, inbox, and alerts all already have dropdown menus. So, in this case, you would probably just want to delete or hide the tablinks. You can manually add the items to each dropdown menu too, but I don't recommend this. Removing is best. All of the links here show up under your username dropdown menu.

Hi a good tutorial. All codes have adapted only at Personal Details is not right!
See picture, please help!

navigation.png


My Templates,
navigation:
http://pastebin.com/6T2h7Bf2

navigation_visitor_tabs:
http://pastebin.com/5CBtRXqp
 
Audentio updated Giving selected navigation tabs dropdown menus with a new update entry:

visitorTabs note

NOTE: The privateTabs area (username, inbox, alerts, logout) already have dropdown menus (save for logout, but I don't think the logout should have a dropdown). So you have to use your best judgement here. For me, I just remove the tablinks for these tabs, since the links shown (Personal Details, Conversations, Your News Feed, Likes You've Received) all show up under the username dropdown anyways).

Read the rest of this update entry...
 
In the navigation_visitor_tab template, find the div called tabLinks and just deleted it.

Alternatively,

Code:
.visitorTabs .tabLinks {display: none}
saves you from having to make that template edit, if you put this in EXTRA.css.
 
Audentio submitted a new resource:
Interesting article. I'm searching for something similar so I'll try to ask you.

You say "By default, XenForo chooses to display the current tab without a menu and displays the contents of that menu inside the 'tabLinks' class". Well I'm searching for a method to replicate this with a custom tab and custom submenu I've created. Have you any suggestion or tips to do that?

Thanks
 
Please update and also, I would like to ask how you can remove the SplitCtrl. I don't like the arrow popping when hovering the tab. Instead I want the tab to be doing the drop down quicklinks. how can we do that?
 
How do I do this for the home tab? Under the navigation template for home all there is:


<!-- home -->
<xen:if is="{$showHomeLink}">
<li class="navTab home PopupClosed"><a href="{$homeLink}" class="navLink">{xen:phrase home}</a></li>
</xen:if>
 
What's weird is if I make changes to the template regard the home section nothing changes..while if if change the forum section it will change...
 
How do I do this for the home tab? Under the navigation template for home all there is:


<!-- home -->
<xen:if is="{$showHomeLink}">
<li class="navTab home PopupClosed"><a href="{$homeLink}" class="navLink">{xen:phrase home}</a></li>
</xen:if>
Well the home tab doesn't have a dropdown by default. So it wouldn't have anything to do.
 
Isn't that what you would normally do for forums tab?

Anyways, the tutorial is the same process no matter what tab it is (for the most part).
 
Yes I am using xenPorta, also Nodes as Tabs. Can you explain what I need to do in more detail?

See the part in the tutorial that starts with:

Even though this is the forums tab, the code change is the same.

First, find:

Start there. Essentially what you're doing is adding/removing popup control classes, that's all.
 
Top Bottom