• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Giving selected navigation tabs dropdown menus

Giving selected navigation tabs dropdown menus

Mike Creuzer

Well-known member
#1
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...
 

Mike Creuzer

Well-known member
#6
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!



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

navigation_visitor_tabs:
http://pastebin.com/5CBtRXqp
 

Mike Creuzer

Well-known member
#7
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...
 

Mike Creuzer

Well-known member
#9
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.
 

AndreaMarucci

Well-known member
#10
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
 
#11
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?
 

NeoCHI

Active member
#13
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>
 

NeoCHI

Active member
#14
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...
 

Mike Creuzer

Well-known member
#15
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.
 

Mike Creuzer

Well-known member
#17
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).