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

Suzie Nielsen replied to Suzie Nielsen's discussion
Ning 2 having problems loading
"KOS, Thanks!  You are so nice!"
Saturday
Bizz replied to Suzie Nielsen's discussion
Ning 2 having problems loading
"This happened once before on 3 some time back, it was something Ning had to sort out"
Saturday
Suzie Nielsen replied to Suzie Nielsen's discussion
Ning 2 having problems loading
"Bizz, Thanks... but is this what you see? This is not my layout---this is a link  to screenshot   s…"
Friday
Kos replied to Suzie Nielsen's discussion
Ning 2 having problems loading
"There something going on b/c CSS isn't loading when I'm signed in.  It's happening on all major bro…"
Friday
Kos replied to Suzie Nielsen's discussion
Ning 2 having problems loading
"Okay did it.  Ticket #1919976"
Friday
Bizz replied to Suzie Nielsen's discussion
Ning 2 having problems loading
"Loads for me on all browsers"
Friday
Suzie Nielsen replied to Suzie Nielsen's discussion
Ning 2 having problems loading
" A member says discussions page is locked -won't load... I am on Chrome!LOL!"
Friday
Suzie Nielsen replied to Suzie Nielsen's discussion
Ning 2 having problems loading
"I can't get the dashboard to load so I can turn in a ticket! Can you?"
Friday
Kos replied to Suzie Nielsen's discussion
Ning 2 having problems loading
"It pops up on Chrome and IE with no problem but it won't load at all on Firefox.  I've tried five t…"
Friday
Suzie Nielsen posted a discussion
Hi there, Just wondering if anyone else is having problems today? My site won't load properly! I ha…
Friday
AutographTip updated their profile
Friday
Fabricio Giugni replied to Anastasia_Ning_Support's discussion
Welcome Landing Page Builder
"Hi there?Is the Landing page working now? Can we capture emails? Does it work with MailChimp?
I ask…"
Friday
More…

Meanwhile, you can check our social media channels