TOP Navigation Upper Menu bar Dynamic:

 TOP Navigation Upper Menu bar Dynamic:

populating from 4 list, 3 parent list, 4 main navigation list
===============================

$(document).ready(function(){

    GetParentMenu();
 
});


//=============== public variables===========
var parentMenu=[]; var PmenuArray=[]; var FmenuArray=[]; var SmenuArray=[];
//===========================================

//===============Get Parent Menu ============

function GetParentMenu() {
    $().SPServices({
        operation: "GetListItems",
        async: false,
        webURL : "https://team.amat.com/sites/BIM_QA/NewAgsDashboard",
        listName: "TopNavigation",
        CAMLViewFields:"<ViewFields Properties='True' />",
        CAMLQuery: "<Query><Where><Eq><FieldRef Name='IsActive' /><Value Type='Integer'>1</Value></Eq></Where><OrderBy><FieldRef Name='ID' Ascending='True'/></OrderBy></Query>",
        completefunc: function (xData, Status){
            ParentMenu (xData, Status);
        }
    });
}

//======================= Get all Navigation content in object array ====================

function ParentMenu(xData, Status)
{
    PmenuArray=[]; var newArray = [];
    $(xData.responseXML).SPFilterNode("z:row").each(function() {
 
        if($(this).attr("ows_ParentMenu"))
        {
            var pMenu=""; var fMenu=""; var sMenu=""; var tMenu=""; var url="";
            pMenu = $(this).attr("ows_ParentMenu").split('#')[1];
   
            if($(this).attr("ows_FirstLevelMenu"))
                fMenu = $(this).attr("ows_FirstLevelMenu").split('#')[1];
       
            if($(this).attr("ows_SecondLevelMenu"))
                sMenu = $(this).attr("ows_SecondLevelMenu").split('#')[1];
         
            if($(this).attr("ows_ThirdLevelMenu"))
                tMenu = $(this).attr("ows_ThirdLevelMenu").split('#')[1];
       
            if($(this).attr("ows_LinkUrl"))
                url = $(this).attr("ows_LinkUrl");

            if($.inArray(pMenu, newArray) == -1)
            {
                newArray.push(pMenu);
               
                var objNewArr = {
                pMenu : pMenu,
                fMenu : fMenu,
                url   : url
                };
                parentMenu.push(objNewArr);
            }
            var objArr = {
                pMenu : pMenu,
                fMenu : fMenu,
                sMenu : sMenu,
                tMenu : tMenu,
                url   : url
            };
            PmenuArray.push(objArr);
        }
    });
    LoopParentMenu();
}


//=============Looping parent Menu and getting sub menu ================

function LoopParentMenu()
{
    var Content = "<ul class='nav navbar-nav'>";
    for(var i=0 ; i<parentMenu.length; i++)
    {
        if(parentMenu[i].fMenu)
        {
            Content += "<li><a href='#' class=''>"+parentMenu[i].pMenu+"<span class='caret'></span></a>";
            Content += LoopFirstLevelMenu(parentMenu[i].pMenu)
            Content += "</li>";
        }
        else
        {
            Content += "<li><a href='"+parentMenu[i].url+"'>"+parentMenu[i].pMenu+"</a></li>";
        }
    }
 

    Content += "</ul>";

    $('#menuDiv').append(Content);
 
}
//=====================================================

// ====================Filter first menu ==============

function FilterfstMenu(menuItem)
{
   // var result = PmenuArray.filter(k => k.pMenu == menuItem);
    var result = PmenuArray.filter(function(k){ return k.pMenu == menuItem});

   
    var fstMenu = []; var newArray = [];
    for(var i=0;i<result.length;i++)
    {
         var valuefMenu = result[i].fMenu;
         var valuesMenu = result[i].sMenu;
         var url        = result[i].url;


        if($.inArray(valuefMenu, fstMenu) == -1)
        {
           fstMenu.push(valuefMenu);
         
           var objArray = {
            fMenu: valuefMenu,
            sMenu: valuesMenu,
            url  : url
           };
           newArray.push(objArray);
        } 
       
         
    }
    return newArray;

}

//====================Looping first level menu for geeting HTML for sencond level menu ===============

function LoopFirstLevelMenu(menuItem)
{
    var fstMenu = FilterfstMenu(menuItem);
   // var result = PmenuArray.filter(k => k.pMenu == menuItem);
    var result = PmenuArray.filter(function(k){ return k.pMenu == menuItem});



    var content = "<ul class='dropdown-menu up_arrow'>";
    for(var i=0 ; i<fstMenu.length; i++)
    {
        if(fstMenu[i].sMenu)
        {
            content += "<li><a href='#'>"+fstMenu[i].fMenu+"<span class='caret'></span></a>";
            content += LoopSencondLevelMenu(fstMenu[i].fMenu,menuItem);          //== getting second level menu.
            content += "</li>";
        }
        else
        {
            content += "<li><a href='"+fstMenu[i].url+"'>"+fstMenu[i].fMenu+"</a></li>";
        }
    }
    content += "</ul>";

    return content;
}

// ====================Filter second lvl menu ===============

function FilterSecMenu(menuItem,pmenu)
{
    //var result  = PmenuArray.filter(k => k.fMenu == menuItem);
    var result  = PmenuArray.filter(function(v,i){return(v["fMenu"] == menuItem) && (v["pMenu"] == pmenu)});
    var scdMenu = []; var newArray = [];

    for(var i=0;i<result.length;i++)
    {
         var valuesMenu = result[i].sMenu;
         var valuetMenu = result[i].tMenu;
         var url        = result[i].url;
     
        if($.inArray(valuesMenu, scdMenu) == -1)
        {
            scdMenu.push(valuesMenu);
           
              var objArray = {
            sMenu: valuesMenu,
            tMenu: valuetMenu,
            url  : url
           };
           newArray.push(objArray);

        }
    }
    return newArray;

}

// ====================looping second level menu ====================

    function LoopSencondLevelMenu(menuItem,pmenu)
    {
        var scdMenu = FilterSecMenu(menuItem,pmenu);
       // var result  = PmenuArray.filter(k => k.fMenu == menuItem);

        var content = "<ul class='dropdown-menu'>";
        for(var i=0 ; i<scdMenu.length; i++)
        {
            if(scdMenu[i].tMenu)
            {
                  content += "<li><a href='#'>"+scdMenu[i].sMenu+"<span class='caret'></span></a>";
                  content += ThirdLevelMenu(scdMenu[i].sMenu,menuItem,pmenu);
                  content += "</li>";

            }
            else
            {
                content += "<li><a href='"+scdMenu[i].url+"'>"+scdMenu[i].sMenu+"</a></li>";
            }
        }
        content += "</ul>";

        return content;
    }

//============== filter third level menu ================
   
   function FilterThirdMenu(smenu,fmenu,pmenu)
   {
      //  var result  = PmenuArray.filter(k => k.sMenu == menuItem);
        var result  = PmenuArray.filter(function(v,i){return(v["fMenu"] == fmenu) && (v["sMenu"] == smenu) && (v["pMenu"] == pmenu)});
        var trdMenu = []; var newArray = [];
        for(var i=0;i<result.length;i++)
        {           
            var valuetMenu = result[i].tMenu;
            var url        = result[i].url;
            if($.inArray(valuetMenu, trdMenu) == -1)
        {
            trdMenu.push(valuetMenu);
           
        var objArray = {
            tMenu: valuetMenu,
            url  : url
            };
            newArray.push(objArray);
        }
        }
      return newArray;
   }

 //================= looping third level menu ==================

   function ThirdLevelMenu(tmenu,smenu,pmenu)
    {
        var trdMenu = FilterThirdMenu(tmenu,smenu,pmenu)
        var content = "<ul class='dropdown-menu'>";
       
        for(var i=0 ; i<trdMenu.length; i++)
        {
            if(trdMenu[i].tMenu)
            {
                content += "<li><a href='"+trdMenu[i].url+"'>"+trdMenu[i].tMenu+"</a></li>";
            }
         
        }
        content += "</ul>";
        return content;
    }

 //===========================================