Current status of the Ning Platform is always available on the Ning Status Blog.

FORUM

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 :-)

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Announcements

 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Josie Chen updated their profile
1 hour ago
Anna_Ning_Support replied to Eva's discussion
Ning pushes us!
"Hello,
We do apologize for all the misunderstandings.
This is just the information on the migration…"
4 hours ago
Adrian Essex replied to Anastasia_Ning_Support's discussion
Migration FAQ
"Counting the number of members is easy, how do I know how much storage I have used? Does Ning 3.0 u…"
12 hours ago
Larry Brocaw replied to Anastasia_Ning_Support's discussion
Why should I migrate?
"Is this migration going to be mandatory?"
13 hours ago
Suzie Nielsen replied to Anastasia_Ning_Support's discussion
Step-by-step migration guide
"I have had a 3.0 built and ready for several years now...I spent a lot of money on coding... but it…"
13 hours ago
APOSTLE TEYSHANA WILEY replied to Anastasia_Ning_Support's discussion
Step-by-step migration guide
"Hello, and GA, in your response you stated and so on. Would we be able to add new pages, events, no…"
15 hours ago
Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
Step-by-step migration guide
"Hi there!

During migration, all the information and members will be transferred, except for the in…"
16 hours ago
Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
Step-by-step migration guide
"Hello Christine!

It is not mandatory, you can stay on your 2.0 network and continue to use it.…"
16 hours ago
Kristian Kolman, Fyre Walker, Michael Sarcauga and 12 more joined Ning Creators Social Network
16 hours ago
John Voris liked Anastasia_Ning_Support's discussion Why should I migrate?
17 hours ago
Eva posted a discussion
MIGRATION TO NING 3.0 IS A COUPLE OF CLICKS AWAY!Hi Ning!If you want to force me to migrate, they f…
18 hours ago
Christine replied to Anastasia_Ning_Support's discussion
Step-by-step migration guide
"Do we HAVE to switch to 3.0? Is this mandatory? TIA for your help."
18 hours ago
More…

Meanwhile, you can check our social media channels