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

FORUM

Hello to everyone!

Instead of posting reply here I have decided to post the separate discussion as will look better here and I hope it would be easier to understand what to do.

You should insert the code in the Social Site Manager on the Custom Code tab in the End of page field.

Here is the code itself (maybe it's could be done easier, if you have ideas don't hesitate to post them or to critique this code):

   NOTE: This code contains the 3rd level menu I have created during tests and you can check it's work here, just hover over Video tab. 

<script>

var menu3 = ['<ul class="subSubTab"><li class="subTab-item"><a href="https://itsaverytestnetwork.ning.com/test1">Test1</a></li><li class="subTab-item"><a href="https://itsaverytestnetwork.ning.com/test2">Test2</a></li><li class="subTab-item"><a href="https://itsaverytestnetwork.ning.com/test3">Test3</a></li></ul>', '<ul class="subSubTab"><li class="subTab-item"><a href="https://itsaverytestnetwork.ning.com/test1">Test4</a></li><li class="subTab-item"><a href="https://itsaverytestnetwork.ning.com/test2">Test5</a></li></ul>'];

var parent = ['li.subTab-item.original > a[href="https://itsaverytestnetwork.ning.com/event"]', 'li.subTab-item.original > a[href="https://itsaverytestnetwork.ning.com/events-2"]'];

const even = n => !(n % 2);
var dimw;

x$(parent).each(function( j ) {
x$('li.subTab-item').addClass('original');
if (window.matchMedia("(min-width: 769px)").matches) {
x$(parent[j]).prepend(menu3[j]);
x$('.subSubTab').css({"display":"none","position":"absolute"});
x$(parent[j]).hover(
function () {
x$(this).children('.subSubTab').show();
dimw = x$(this).parent().parent('.subTab').width();
x$(this).children('.subSubTab').css('left',dimw);
},
function () {
x$(this).children('.subSubTab').hide();
});
}else
{
x$(parent[j]).after(menu3[j]);
x$('ul.subSubTab').css({'position':'relative'});
parent_copy = '<li class="subTab-item copy"><a href="'+ x$(parent[j]).attr('href') +'">'+ x$(parent[j]).text() +'</a></li>';
x$(parent[j]).parent().children('.subSubTab').prepend(parent_copy);
x$(parent[j]).next('.subSubTab').children().children().css('padding-left','30px');
x$(parent[j]).each(function ( i ) {
x$(this).click(function ( e ) {
e.preventDefault();
i=i+1;
setTimeout(function() {
if (even(i)==false) {
x$(parent[j]).next('.subSubTab').css('display','none'); x$(parent[j]).parent().parent('.subTab').css('display','block'); x$(parent[j]).parent().parent('.subTab').parent().children('.icon-down').addClass('hovered');}
else{
x$(parent[j]).next('.subSubTab').css('display','block'); x$(parent[j]).parent().parent('.subTab').css('display','block'); x$(parent[j]).parent().parent('.subTab').parent().children('.icon-down').addClass('hovered');}
}, 100);

} );

x$(document.body).click(function() { if (x$(event.target).closest('.original > a').length == 0) {x$('ul.subSubTab').hide(); i=1;}});
} );
}

});

</script>

Basically, this code allows you to add as many 3rd levels menus as you want without changing the algorithm. However, I have wanted to highlight several cons of this approach as well:

   - The menu blinks when you open or close the 3rd level subtab on mobile version

   - The code would display the 3rd level tabs regardless on their privacy settings (the thought about this has just come to me when I have been creating this post so probably I would correct it later)

   - In order to create your own menu several adjustments should be made, but no worries I show you how :-)

(I haven't noticed any other cons of this approach so please let me know if there any other issues, maybe I'll be able to correct them)

Creation of your own menu:


As I have mentioned before the code contain third level menus, maybe I'll rework it later, but for now and I think it shouldn't be difficult to change the code of the menus after the explanations.

The 3rd level menu itself:


If you take a look at the start of the code you will see such lines:

var menu3 = ['<ul class="subSubTab"><li class="subTab-item"><a href="https://itsaverytestnetwork.ning.com/test1">Test1</a></li><li class="subTab-item"><a href="https://itsaverytestnetwork.ning.com/test2">Test2</a></li><li class="subTab-item"><a href="https://itsaverytestnetwork.ning.com/test3">Test3</a></li></ul>', '<ul class="subSubTab"><li class="subTab-item"><a href="https://itsaverytestnetwork.ning.com/test1">Test4</a></li><li class="subTab-item"><a href="https://itsaverytestnetwork.ning.com/test2">Test5</a></li></ul>'];

Basically it's the 3rd level menus. In order to create your own you should simply change this code. Each separate menu start from the "'<ul" and ends with "</ul>'", each menu is separated with coma. Each menu should have tabs (the 3rd level tabs in our case), each tab starts from "<li class" and ends with "</li>". In each tab you have the link to the page (as basically the tab is just the tab after all :-)), the link starts from "<a href",  and ends with "</a>".

First of all you should determine how many 3-rd level menus would you like to have. And create the structure in any text editor you have. For example for two menus it will look like this:

For example for two menus it will look like this: 

<ul class="subSubTab">

</ul>

 <ul class="subSubTab">

</ul>

For example for three menus it will look like this: 

<ul class="subSubTab">

</ul>

 <ul class="subSubTab">

</ul>

 <ul class="subSubTab">

</ul>

Then you should decide how many tabs would you have in each menu, and paste this code <li class="subTab-item"></li> in each menu once per each tab. For example you have decided to have 2 3rd level menus with 3 tabs in the first menu and 2 tabs in the second, so your code will look like this:

 

For example for three menus it will look like this: 

<ul class="subSubTab">

<li class="subTab-item"></li>

<li class="subTab-item"></li>

<li class="subTab-item"></li>

</ul>

 <ul class="subSubTab">

<li class="subTab-item"></li>

<li class="subTab-item"></li>

</ul>

Then it's necessary to insert the links that would be presented in your tabs. The code for the link looks like this <a href="https://itsaverytestnetwork.ning.com/test1">Test1</a>. Instead of the link https://itsaverytestnetwork.ning.com/test1 you should use your link (don't remove the quotes in the code by exident) and also you should replace Test1 with the text that would be displayed on the tab. For the example from above it would look like this:

For example for three menus it will look like this: 

<ul class="subSubTab">

<li class="subTab-item"><a href="Your_link">Your_text</a></li>

<li class="subTab-item"><a href="Your_link">Your_text</a></li>

<li class="subTab-item"><a href="Your_link">Your_text</a></li>

</ul>

 <ul class="subSubTab">

<li class="subTab-item"><a href="Your_link">Your_text</a></li>

<li class="subTab-item"><a href="Your_link">Your_text</a></li>

</ul>

 The code for the menus is almost done, you just need to insert it into the following structure:

var menu3 = ['Your_first_menu', 'Your_second_menu','Your_third_menu',....,'Your_n-th_menu'];

NOTE: the code for each menu should be in apostrophes and separated with the comma. Let's return to the previous example, the code for it would look like this:

  

For example for three menus it will look like this: 

var menu3 = ['<ul class="subSubTab"><li class="subTab-item"><a href="Your_link">Your_text</a></li><li class="subTab-item"><a href="Your_link">Your_text</a></li><li class="subTab-item"><a href="Your_link">Your_text</a></li></ul>', '<ul class="subSubTab"><li class="subTab-item"><a href="Your_link">Your_text</a></li><li class="subTab-item"><a href="Your_link">Your_text</a></li></ul>'];

Then you can replace the first part of the code I have provided in the first yellow box with the one you get:

This code should be replaced : 

var menu3 = ['<ul class="subSubTab"><li class="subTab-item"><a href="https://itsaverytestnetwork.ning.com/test1">Test1</a></li><li class="subTab-item"><a href="https://itsaverytestnetwork.ning.com/test2">Test2</a></li><li class="subTab-item"><a href="https://itsaverytestnetwork.ning.com/test3">Test3</a></li></ul>', '<ul class="subSubTab"><li class="subTab-item"><a href="https://itsaverytestnetwork.ning.com/test1">Test4</a></li><li class="subTab-item"><a href="https://itsaverytestnetwork.ning.com/test2">Test5</a></li></ul>'];

Congratulations! The code for the menus is ready and it was the hardest part.

However, you should determine when those menus should appear, so you should chose the 2nd level tabs, that would reveal those 3-rd level menus.

Here is the code we will be changing for this purpose:

   

var parent = ['li.subTab-item.original > a[href="https://itsaverytestnetwork.ning.com/event"]', 'li.subTab-item.original > a[href="https://itsaverytestnetwork.ning.com/events-2"]'];

As you have determined the amount of menus you will be displaying, you should choose the same amount of 2nd level tabs and place them in the same order, so the tab that would be revealing the first menu should go first in the code. 

Basically the structure that you should obtain looks like this:

 var parent = ['li.subTab-item.original > a[href="Link of the first 2nd lvl tab"]', 'li.subTab-item.original > a[href="Link of the second 2nd lvl tab"]',...,'li.subTab-item.original > a[href="Link of the n-th 2nd lvl tab"]'];

NOTE: Make sure you have replaced only links and haven't removed the quotes, commas etc.

If you don't know where to find the link of your 2nd level subtabs here is the screen shot that might be helpful.

NOTE: the URL presented here is a bit incorrect, you should place https:// before it, so it would look like https://itsaverytestnetwork.ning.com, or you can just open the tab and copy the link from the address bar.

If we take the example that I have been suing all this time the code should look like this:

var parent = ['li.subTab-item.original > a[href=""Link of the first 2nd lvl tab"]', 'li.subTab-item.original > a[href="Link of the second 2nd lvl tab"]'];

The code from the first yellow box that should be replaced:

var parent = ['li.subTab-item.original > a[href="https://itsaverytestnetwork.ning.com/event"]', 'li.subTab-item.original > a[href="https://itsaverytestnetwork.ning.com/events-2"]'];

And basically that it :-), if you have gone so far I'm really proud of you. If you have replaced everything I have mentioned, you are ready to insert this code and enjoy your new 3-rd level menus.

Just to make sure you have done everything right here is the code that we could have if i decide to replace everything needed by the code from the green boxes:

<script>

var menu3 = ['<ul class="subSubTab"><li class="subTab-item"><a href="Your_link">Your_text</a></li><li class="subTab-item"><a href="Your_link">Your_text</a></li><li class="subTab-item"><a href="Your_link">Your_text</a></li></ul>', '<ul class="subSubTab"><li class="subTab-item"><a href="Your_link">Your_text</a></li><li class="subTab-item"><a href="Your_link">Your_text</a></li></ul>'];

var parent = ['li.subTab-item.original > a[href=""Link of the first 2nd lvl tab"]', 'li.subTab-item.original > a[href="Link of the second 2nd lvl tab"]'];

const even = n => !(n % 2);
var dimw;

x$(parent).each(function( j ) {
x$('li.subTab-item').addClass('original');
if (window.matchMedia("(min-width: 769px)").matches) {
x$(parent[j]).prepend(menu3[j]);
x$('.subSubTab').css({"display":"none","position":"absolute"});
x$(parent[j]).hover(
function () {
x$(this).children('.subSubTab').show();
dimw = x$(this).parent().parent('.subTab').width();
x$(this).children('.subSubTab').css('left',dimw);
},
function () {
x$(this).children('.subSubTab').hide();
});
}else
{
x$(parent[j]).after(menu3[j]);
x$('ul.subSubTab').css({'position':'relative'});
parent_copy = '<li class="subTab-item copy"><a href="'+ x$(parent[j]).attr('href') +'">'+ x$(parent[j]).text() +'</a></li>';
x$(parent[j]).parent().children('.subSubTab').prepend(parent_copy);
x$(parent[j]).next('.subSubTab').children().children().css('padding-left','30px');
x$(parent[j]).each(function ( i ) {
x$(this).click(function ( e ) {
e.preventDefault();
i=i+1;
setTimeout(function() {
if (even(i)==false) {
x$(parent[j]).next('.subSubTab').css('display','none'); x$(parent[j]).parent().parent('.subTab').css('display','block'); x$(parent[j]).parent().parent('.subTab').parent().children('.icon-down').addClass('hovered');}
else{
x$(parent[j]).next('.subSubTab').css('display','block'); x$(parent[j]).parent().parent('.subTab').css('display','block'); x$(parent[j]).parent().parent('.subTab').parent().children('.icon-down').addClass('hovered');}
}, 100);

} );

x$(document.body).click(function() { if (x$(event.target).closest('.original > a').length == 0) {x$('ul.subSubTab').hide(); i=1;}});
} );
}

});

</script>

I hope it was helpful, if not then well I have improved my skills a bit so anyway there is something positive.

If any help needed with the implementation of this code, just let me know.

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

Join Ning Creators Social Network

Email me when people reply –

Replies

  • Kyryl, have I told you lately, how awesome you are??"  Thank you Kyryl, for everything you do here on creators. I hope you have a wonderful day. ;)

    Kyryl_Ning_Support
    This is where Creators get together to share advice and tips about growing their Ning Social Networks.
    • Thanks, George :-) I hope you have a wonderful day as well. 

      Kyryl_Ning_Support
      This is where Creators get together to share advice and tips about growing their Ning Social Networks.
  • The code has been updated. Thanks, George, for letting me know about the issue :-)

    George H. Compton IV
    This is where Creators get together to share advice and tips about growing their Ning Social Networks.
This reply was deleted.

Latest Activity

Ning via Facebook

A or B? Black or white? Discover why A/B testing is more than simple choice of 2 landing page…

Kyryl_Ning_Support replied to DD's discussion
A few features that would make Ning even better...
"Hi there!
Mentions - I have seen in the documentation that our tech team is thinking how this funct…"
8 hours ago
Kyryl_Ning_Support replied to Bizz ( John )'s discussion
Multiple choice poll- how to make the selections stand out better
"Nice tip, John!"
10 hours ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"Hi Kos,
I have tried to reproduce this issue on my PC but no luck with that. Could you please share…"
10 hours ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"Thanks, I have updated the suggestion with your notes :-)
When I would hear something about this I'…"
11 hours ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion
SSL certificate feature release
"Hi there!
If you mapped your domain, in that case, yes, it's not the only thing you should do. The…"
11 hours ago
Robert Martin, waimaoniu, Brawen and 50 more joined Ning Creators Social Network
12 hours ago
Ning via Facebook

The best 23 articles about social media are here for you! Follow the link and read them all!…

Kos replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"To be honest, I think it depends on the SIZE of the network and how heavily they use Chat.  I think…"
yesterday
Mary Adams replied to Kyryl_Ning_Support's discussion
SSL certificate feature release
"There is now a check box in my Ning 2.0 site  to use SSL. I imagine that I don't just check the box…"
yesterday
Ning via Facebook

Your blog HAS its voice! And you have outstanding chance to make it awesome. Begin with these…

Kos replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"No, not really although I will say, when I initially open chat, the chat screen is blank and I have…"
yesterday
More…

Meanwhile, you can check our social media channels