javascript - 需要将CSS修改为megamenu以使其正常工作

我从事一个SharePoint项目，并被要求创建一个全局导航，该导航从SharePoint列表中获取其数据。我能够毫无问题地成功实现这一目标。我创建了一个可以在here中找到的模型。

let myMockListData = [
	{
		URL: "/siteA.aspx",
		URLNAME: "Home",
    dropDown: "no",
    id: "home"
	},
	{
		URL: "/siteA.aspx",
		URLNAME: "Site A",
    dropDown: "yes",
    id: "SiteA"
	},
	{
		URL: "/siteB.aspx",
		URLNAME: "Site B",
    dropDown: "no",
    id: "siteB"
	},
	{
		URL: "/siteC.aspx",
		URLNAME: "Site C",
    dropDown: "yes",
    id: "SiteC"
	},
	{ URL: "/siteD.aspx", URLNAME: "Site D", dropDown: "no", id: "siteD" },
	{ URL: "/siteE.aspx", URLNAME: "Site E", dropDown: "no", id: "siteE" }
];

var subList = [
  {subURL: "/site/a", id:"SiteA", URLNAME: "Site A"},
  {subURL: "/site/c", id:"SiteC", URLNAME: "Site C"},
  {subURL: "/site/a", id:"SiteA", URLNAME: "Site A"},
  {subURL: "/site/a", id:"SiteA", URLNAME: "Site A"},
  {subURL: "/site/c", id:"SiteC", URLNAME: "Site C"},
  {subURL: "/site/a", id:"SiteA", URLNAME: "Site A"},
  {subURL: "/site/c", id:"SiteC", URLNAME: "Site C"}
]

createNavigation(myMockListData);

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

function createNavigation(navData){
  var topNav = document.getElementById("myTopnav");
  for (var x=0; x<navData.length; x++){

    if (navData[x].dropDown === "no"){
            var aLink = _createEl("a");
       var aTextNode = document.createTextNode(navData[x].URLNAME);
        aLink.href=navData[x].URL;
        aLink.appendChild(aTextNode);
        topNav.appendChild(aLink);
    }else{
                var buildSubNavigation;

          buildSubNavigation = buildSubNavBar(navData[x].id);
          console.log(buildSubNavigation)
          topNav.appendChild(buildSubNavigation)
    }
  }
}

function buildSubNavBar(subNavID){
  console.log(subNavID)
  //create div and add dropdown class
    var ddDiv = _createEl("div");
    ddDiv.classList.add("dropdown");
  //create button and add text
    var btn = _createEl("button");
  btn.classList.add("dropbtn")
    var btnText = document.createTextNode(subNavID);
  //append the text to the button
    btn.appendChild(btnText);
  //append the button to the div
    ddDiv.appendChild(btn);
  //create i tag and add "fa fa-caret-down" classes
    var itag = _createEl("i");
        itag.classList.add("fa")
        itag.classList.add("fa-caret-down")
   btn.appendChild(itag)
   ddDiv.appendChild(btn)

  var ddContent = _createEl("div");
      ddContent.classList.add("dropdown-content")
    for (var i=0; i<subList.length; i++){
      if (subList[i].id === subNavID){
          var li = _createEl("li");
          var a = _createEl("a");
          var aTextNode = document.createTextNode(subList[i].URLNAME);

          a.href = subList[i].subURL;
          a.appendChild(aTextNode);
          ddContent.appendChild(a)
					//li.appendChild(aTextNode);
       }
    }

  ddDiv.appendChild(ddContent)
  return ddDiv;
}

function _createEl(el){
  return document.createElement(el);
}











/*
//Function call to dynamically build navigation based on datasource
buildNavBar(myMockListData);

//shortcut for document.createElement()
function _crE(el){
  return document.createElement(el);
}

function buildSubNavBar(subNavID){
    var ul = _crE("ul");
    ul.classList.add("dropdown-menu");

    for (var i=0; i<subList.length; i++){
      if (subList[i].id === subNavID){
          var li = _crE("li");
          var a = _crE("a");
          var aTextNode = document.createTextNode(subList[i].URLNAME);

          a.href = subList[i].subURL;
          a.appendChild(aTextNode);
          li.appendChild(a)
					//li.appendChild(aTextNode);
          ul.appendChild(li);
       }
    }

  return ul;
}

function buildNavBar(navData){

  for (var x=0; x<navData.length; x++){
      var li = _crE("li");

      if(navData[x].URLNAME == "Home")
        li.classList.add("active");

        var buildSubNavigation="";

        if(navData[x].dropDown === "yes"){
          li.setAttribute("id", navData[x].id)
          buildSubNavigation = buildSubNavBar(navData[x].id);
          console.log(buildSubNavigation)
          li.appendChild(buildSubNavigation)
        }

      var li_a = _crE("a");
      if (navData[x].dropDown == "no"){
        li_a.href = navData[x].URL;
      } else {
        li_a.href = navData[x].URL;
        li_a.classList.add("dropdown-toggle");
        li_a.setAttribute("data-toggle", "dropdown")

        var newSpan = _crE("span");
            newSpan.classList.add("caret")
        li_a.appendChild(newSpan);
      }
    					//create the textnode(urlname) from list and complete link creation
					var aTextNode = document.createTextNode(navData[x].URLNAME);
					li_a.appendChild(aTextNode);

       li.appendChild(li_a);
      var idNav = document.getElementById("test")
  idNav.appendChild(li)
  }
}
*/

/*


/*	function buildNavBar(navData){
				//Get a reference to the parent of where the nav will go
				var parentDiv = document.querySelector("#subNav");
				var mainUl = document.getElementById("s4-titlerow");

				//Loop through the data from the REST API call to the list cointaining navigation information
				for (var x=0; x<navData.length; ++x){
					console.log(navData);

					//Create a span and anchor for each navigation link
					var navspan = document.createElement("span");
					var navA = document.createElement("a");

					//add href attribute set to url from list
					navA.href = navData[x].URL;

					//create the textnode(urlname) from list and complete link creation
					var aTextNode = document.createTextNode(navData[x].URLNAME);
					navA.appendChild(aTextNode);

					//append the link to the span
					navspan.appendChild(navA);

					//append nav to div
					parentDiv.appendChild(navspan);
				}
			}*/

body {margin:0;font-family:Arial}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

w3schools有一个静态版本，我使用dom操作使其动态。我使用一组对象来模仿SharePoint列表。

这是我遇到的问题-一个菜单项需要是一个大型菜单。我还模仿了找到的here代码来创建大型菜单。将董事会悬停时，将显示超级菜单。我将导航的CSS与大型菜单的CSS合并在一起，我认为这就是问题所在。我相信当我在遍历数组中的菜单项时将类添加到元素时，在下面的这段代码中发现了我遇到的问题。当我循环时，我需要给大型菜单项一个不同的类名'Mdropdown'和'Mdropbtn'

function createNavigation(navData) {
var topNav = document.getElementById("myTopnav");
for (var x = 0; x < navData.length; x++) {
    if (navData[x].dropDown === "no") {
        var aLink = _createEl("a");
        var aTextNode = document.createTextNode(navData[x].URLNAME);
        aLink.href = navData[x].URL;
        aLink.appendChild(aTextNode);
        topNav.appendChild(aLink);
    } else if (navData[x].dropDown === "yes") {
        var buildSubNavigation;
        buildSubNavigation = buildSubNavBar(navData[x].id);
        topNav.appendChild(buildSubNavigation);
    } else {
        //build megamenu
        var buildSubNavigation;
        buildDirectorateNav = buildDirectorateMegaMenu(navData[x].id);
    }
}
}
function buildSubNavBar(subNavID, isDirectorate) {
//create div and add dropdown class
var ddDiv = _createEl("div");
ddDiv.classList.add("dropdown");   <------- if classname is prefixed with 'M', it works partially
//create button and add text
var btn = _createEl("button");
btn.classList.add("dropbtn");      <------- if classname is prefixed with 'M', it works partially
var btnText = document.createTextNode(subNavID);
//append the text to the button
btn.appendChild(btnText);

这是codepen以获得更清晰的图片。如果将行115更改为ddDiv.classList.add("Mdropdown");，将行118更改为btn.classList.add("Mdropbtn");，则当您将鼠标悬停在Directorate上时，将会看到超级菜单可以工作，但是SiteA和SiteC将停止工作。

//https://www.w3schools.com/howto/howto_css_mega_menu.asp
let myMockListData = [
	{
		URL: "/siteA.aspx",
		URLNAME: "Home",
		dropDown: "no",
		id: "home"
	},
	{
		URL: "/siteA.aspx",
		URLNAME: "Site A",
		dropDown: "yes",
		id: "SiteA"
	},
	{
		URL: "/siteB.aspx",
		URLNAME: "Site B",
		dropDown: "no",
		id: "siteB"
	},
	{
		URL: "/siteC.aspx",
		URLNAME: "Site C",
		dropDown: "yes",
		id: "SiteC"
	},
	{ URL: "/siteD.aspx", URLNAME: "Site D", dropDown: "no", id: "siteD" },
	{ URL: "/siteE.aspx", URLNAME: "Site E", dropDown: "no", id: "siteE" },
	{
		URL: "/siteE.aspx",
		URLNAME: "Directorate",
		dropDown: "directorate",
		id: "Directorate"
	}
];

var subList = [
	{ subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
	{ subURL: "/site/c", id: "SiteC", URLNAME: "Site C" },
	{ subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
	{ subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
	{ subURL: "/site/c", id: "SiteC", URLNAME: "Site C" },
	{ subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
	{ subURL: "/site/c", id: "SiteC", URLNAME: "Site C" }
];

var megaMenuCategory = [
	{ category: "BL", url: "www.gmail.com" },
	{ category: "DT", url: "www.gmail.com" },
	{ category: "HR", url: "www.gmail.com" },
	{ category: "IT", url: "www.gmail.com" },
	{ category: "NE", url: "www.gmail.com" },
	{ category: "SD", url: "www.gmail.com" },
	{ category: "SI", url: "www.gmail.com" },
	{ category: "OB", url: "www.gmail.com" }
];

var categoryMenu = [
	{ category: "BL", menuItem: "BL-AQ", menuUrl: "wwww.gmail.com" },
	{ category: "BL", menuItem: "BL-AC", menuUrl: "wwww.gmail.com" },
	{ category: "BL", menuItem: "BL-EL", menuUrl: "wwww.gmail.com" },
	{ category: "DT", menuItem: "DT-BT", menuUrl: "wwww.gmail.com" },
	{ category: "DT", menuItem: "DT-SE", menuUrl: "wwww.gmail.com" },
	{ category: "DT", menuItem: "DT-PI", menuUrl: "wwww.gmail.com" },
	{ category: "HR", menuItem: "Human Resources", menuUrl: "wwww.gmail.com" },
	{ category: "IT", menuItem: "IT-IO", menuUrl: "wwww.gmail.com" },
	{ category: "IT", menuItem: "IT-CS", menuUrl: "wwww.gmail.com" },
	{ category: "SD", menuItem: "SD-CB", menuUrl: "wwww.gmail.com" },
	{ category: "SD", menuItem: "SD-CX", menuUrl: "wwww.gmail.com" },
	{ category: "SD", menuItem: "SD-EC", menuUrl: "wwww.gmail.com" }
];

createNavigation(myMockListData);

function myFunction() {
	var x = document.getElementById("myTopnav");
	if (x.className === "topnav") {
		x.className += " responsive";
	} else {
		x.className = "topnav";
	}
}

function createNavigation(navData) {
	var topNav = document.getElementById("myTopnav");
	for (var x = 0; x < navData.length; x++) {
		if (navData[x].dropDown === "no") {
			var aLink = _createEl("a");
			var aTextNode = document.createTextNode(navData[x].URLNAME);
			aLink.href = navData[x].URL;
			aLink.appendChild(aTextNode);
			topNav.appendChild(aLink);
		} else if (navData[x].dropDown === "yes") {
			var buildSubNavigation;
			buildSubNavigation = buildSubNavBar(navData[x].id);
			topNav.appendChild(buildSubNavigation);
		} else {
			//build megamenu
			var buildSubNavigation;
			buildDirectorateNav = buildDirectorateMegaMenu(navData[x].id);
		}
	}
}

function buildDirectorateMegaMenu(navDataID) {
	var buildNav;
	var topNav = document.getElementById("myTopnav");
	buildNav = buildSubNavBar(navDataID, "directorate");  //Build mega menu and attach in buildSubNavBar()
	topNav.appendChild(buildNav);
}

function buildSubNavBar(subNavID, isDirectorate) {
	//create div and add dropdown class
	var ddDiv = _createEl("div");
	ddDiv.classList.add("dropdown");
	//create button and add text
	var btn = _createEl("button");
	btn.classList.add("dropbtn");
	var btnText = document.createTextNode(subNavID);
	//append the text to the button
	btn.appendChild(btnText);

	//create i tag and add "fa fa-caret-down" classes
	var itag = _createEl("i");
	itag.classList.add("fa");
	itag.classList.add("fa-caret-down");
	btn.appendChild(itag);
	ddDiv.appendChild(btn);

	var ddContent = _createEl("div");
	ddContent.classList.add("dropdown-content");
	for (var i = 0; i < subList.length; i++) {
		if (subList[i].id === subNavID  && subList[i].id !== "Directorate") {
			var li = _createEl("li");
			var a = _createEl("a");
			var aTextNode = document.createTextNode(subList[i].URLNAME);

			a.href = subList[i].subURL;
			a.appendChild(aTextNode);
			ddContent.appendChild(a);
		}
	}

	//if value is DIRECTORATE
	if (isDirectorate === "directorate") {
		//alert("I ");
		//create div and add dropdown class
		var megaDivDropDown = _createEl("div");
		megaDivDropDown.classList.add("dropdown");

		var megaBtn = _createEl("button");
		megaBtn.classList.add("dropbtn");

    megaDivDropDown.appendChild(megaBtn)
		var megaI = _createEl("i");
		megaI.classList.add("fa");
		megaI.classList.add("fa-caret-down");

		megaBtn.appendChild(megaI);

		var megaDDivContent = _createEl("div");
		megaDDivContent.classList.add("Mdropdown-content");

		var headerDiv = _createEl("div");
		headerDiv.classList.add("Mheader");

		var megaH2 = _createEl("h2");
		var h2Text = document.createTextNode("Team Sites");

		megaH2.appendChild(h2Text);
		headerDiv.appendChild(megaH2);
    megaDDivContent.appendChild(headerDiv);

		var megaDDivRow = _createEl("div");
		megaDDivRow.classList.add("Mrow");

		//Loop through categories & sub-categories items

		for (var i = 0; i < megaMenuCategory.length; i++) {
			var megaDivCol = _createEl("div");
          megaDivCol.classList.add("Mcolumn");
			var colHr = _createEl("h3");
			var colHrText = document.createTextNode(megaMenuCategory[i].category);
			colHr.appendChild(colHrText);
			megaDivCol.appendChild(colHr);
			for (var x = 0; x < categoryMenu.length; x++) {
				if (megaMenuCategory[i].category === categoryMenu[x].category) {
					var colAnchor = _createEl("a");
					colAnchor.href = categoryMenu[x].menuUrl;
					var menuColText = document.createTextNode(categoryMenu[x].menuItem);
					colAnchor.appendChild(menuColText);

					megaDivCol.appendChild(colAnchor);
          megaDDivRow.appendChild(megaDivCol);
          megaDDivContent.appendChild(megaDDivRow);
          ddDiv.appendChild(megaDDivContent);
				}
			}
			//create the other stuff
      //console.log(megaDivCol)
      console.log("megaDdivRow:")
      console.log(ddDiv);
		}
	}

	ddDiv.appendChild(ddContent);
	return ddDiv;
}

function _createEl(el) {
	return document.createElement(el);
}

body {margin:0;font-family:Arial}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}




/*MEGA-MENU*/
* {
  box-sizing: border-box;
}

.Mnavbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.Mnavbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.Mdropdown {
  float: left;
  overflow: hidden;
}

.Mdropdown .Mdropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}

.Mnavbar a:hover, .Mdropdown:hover .Mdropbtn {
  background-color: #555;
  color: white;
}

.Mdropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.Mdropdown-content .Mheader {
  background: #555;
  padding: 16px;
  color: white;
}

.Mdropdown:hover .Mdropdown-content {
  display: block;
}

/* Create three equal columns that floats next to each other */
.Mcolumn {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}

.Mcolumn a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.Mcolumn a:hover {
  background-color: #ddd;
}

/* Clear floats after the columns */
.Mrow:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .Mcolumn {
    width: 100%;
    height: auto;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

任何帮助将非常感激。谢谢！

最佳答案

如下修改buildSubNavBar方法。

function buildSubNavBar(subNavID, isDirectorate) {
    //create div and add dropdown class
    var ddDiv = _createEl("div");
    if(isDirectorate === "directorate"){
        ddDiv.classList.add("Mdropdown");
    }else{
        ddDiv.classList.add("dropdown");
    }
    //create button and add text
    var btn = _createEl("button");
    if(isDirectorate === "directorate"){
        btn.classList.add("Mdropbtn");
    }else{
        btn.classList.add("dropbtn");
    }
    var btnText = document.createTextNode(subNavID);
    //append the text to the button
    btn.appendChild(btnText);

    //create i tag and add "fa fa-caret-down" classes
    var itag = _createEl("i");
    itag.classList.add("fa");
    itag.classList.add("fa-caret-down");
    btn.appendChild(itag);
    ddDiv.appendChild(btn);

    var ddContent = _createEl("div");
    ddContent.classList.add("dropdown-content");
    for (var i = 0; i < subList.length; i++) {
        if (subList[i].id === subNavID  && subList[i].id !== "Directorate") {
            var li = _createEl("li");
            var a = _createEl("a");
            var aTextNode = document.createTextNode(subList[i].URLNAME);

            a.href = subList[i].subURL;
            a.appendChild(aTextNode);
            ddContent.appendChild(a);
        }
    }
    if(isDirectorate === "directorate"){
        //alert("I ");
        //create div and add dropdown class
        var megaDivDropDown = _createEl("div");
        megaDivDropDown.classList.add("dropdown");

        var megaBtn = _createEl("button");
        megaBtn.classList.add("dropbtn");

        megaDivDropDown.appendChild(megaBtn)
        var megaI = _createEl("i");
        megaI.classList.add("fa");
        megaI.classList.add("fa-caret-down");

        megaBtn.appendChild(megaI);

        var megaDDivContent = _createEl("div");
        megaDDivContent.classList.add("Mdropdown-content");

        var headerDiv = _createEl("div");
        headerDiv.classList.add("Mheader");

        var megaH2 = _createEl("h2");
        var h2Text = document.createTextNode("Team Sites");

        megaH2.appendChild(h2Text);
        headerDiv.appendChild(megaH2);
        megaDDivContent.appendChild(headerDiv);

        var megaDDivRow = _createEl("div");
        megaDDivRow.classList.add("Mrow");

        //Loop through categories & sub-categories items

        for (var i = 0; i < megaMenuCategory.length; i++) {
            var megaDivCol = _createEl("div");
            megaDivCol.classList.add("Mcolumn");
            var colHr = _createEl("h3");
            var colHrText = document.createTextNode(megaMenuCategory[i].category);
            colHr.appendChild(colHrText);
            megaDivCol.appendChild(colHr);
            for (var x = 0; x < categoryMenu.length; x++) {
                if (megaMenuCategory[i].category === categoryMenu[x].category) {
                    var colAnchor = _createEl("a");
                    colAnchor.href = categoryMenu[x].menuUrl;
                    var menuColText = document.createTextNode(categoryMenu[x].menuItem);
                    colAnchor.appendChild(menuColText);

                    megaDivCol.appendChild(colAnchor);
                    megaDDivRow.appendChild(megaDivCol);
                    megaDDivContent.appendChild(megaDDivRow);
                    ddDiv.appendChild(megaDDivContent);
                }
            }
            //create the other stuff
            //console.log(megaDivCol)
            console.log("megaDdivRow:")
            console.log(ddDiv);
        }
    }
    ddDiv.appendChild(ddContent);
    return ddDiv;
}