Ok this tip is all about the main nav menu and how to get these pages to show as active like we have for our normal pages. At the moment if you add a custom page or a link page and click on them in the main nav menu they for some reason do not get the class of active added to them, this means they do not get that active colour added to them. Maybe not a big issue I suppose but for me it is really annoying that they do not look like any other active tab. The other part is the subtabs, these again do not get an active class and so if you choose a submenu item and go to that page if you hover over the submenu again it does not give an indication in the menu relevent to the page you are on.
The good thing about sorting this out is that say you have added a page, as an example I will use my social channels tabs page, I added this as a custom page and if you click on the main tab it takes you to this page which has a tabcontainer in it. When the page is active ie open the main tab for it now get's highlighted as it's active. Great so far, now suppose I choose to click on one of the subtabs to this page, like the KatKam-CBR one, now this will take me to that social channels page. Ok nothing new there but check out the Main menu tab ( it is still staying highlighted as active ) so this is telling me where I came from, now also check out the submenu tabs if you hover over it, notice that the KatKam-CBR subtab is highlighted as active. So now I know which main tab I choose to get to this page and also which subtab I selected.
To try this you can do so by visiting my site here : http://bizzssite.ning.com/
While there also check out the Test Forum option in the main nav menu. The actual forum is down in the unlinked pages section and this item in the main nav is a link page. I added this to demo the active link option. Now go ahead and click on it to open the page and you will see it shows now as active.
One more interesting feature is this, suppose you have added a photo page like I have which is called Photos, now if you look in the Tab Headings demo link you will see an item under Galleries called Our Photos, this is just a link page to the main photos page, now go ahead and click on either of these and check out what happens. In the main navbar you will see the tab Photos AND The Demo Sub Tab Blog and now both showing as active. This is because they both contain the Photos Page. Now in the TabDemo main link hover over it and choose the photo at the bottom. This will open the photos page but now all three are showing as active, both main tabs and the subtab.
Ok so here is the little bit of code you need to add to get this working.
One line of css which you set as the colour you want as the active subTab, this you can make the same as you setup in your design studio by copying those colours for the active subtab in the design studio or you can add your own. No need for the other tabs as these take on the settings for the main tabs.
CSS Which goes in your design studio, just edit the colours as you need them. In the code below it's just set to black.
.subTab-item.Subactive > a{ background-color:black!important }
Next we add some custon code to our site and pages custom code end of page section.
<script>
// Set a class for subTabs to show they are active
//Also set the tab above them to active if you click on one
x$(document).ready(function(){
var activeurl = window.location.href;
x$('.subTab-item > a[href="'+activeurl+'"]').parent('li').addClass('Subactive');
x$('.Subactive').closest('.mainTab-item').addClass('active');
x$('.mainTab-item > a[href="'+activeurl+'"]').parent('li').addClass('active');
});
</script>
That's it you should now have functioning active tabs for custom pages, links and subtabs.
John :-)
Replies