Ning3.0 3rd level subtab in navigation bar

[Kyryl_Ning_Support]

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.

[George H. Compton IV]

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]

Thanks, George :-) I hope you have a wonderful day as well. 

[Kyryl_Ning_Support]

The code has been updated. Thanks, George, for letting me know about the issue :-)