JavaScript
1let myMockListData = [2 {3 URL: "/siteA.aspx",4 URLNAME: "Home",5 dropDown: "no",6 id: "home"7 },8 {9 URL: "/siteA.aspx",10 URLNAME: "Site A",11 dropDown: "yes",12 id: "SiteA"13 },14 {15 URL: "/siteB.aspx",16 URLNAME: "Site B",17 dropDown: "no",18 id: "siteB"19 },20 {21 URL: "/siteE.aspx",22 URLNAME: "Training",23 dropDown: "training",24 id: "Training"25 }26];27 28var subList = [29 { subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },30 { subURL: "/site/c", id: "SiteC", URLNAME: "Site C" },31 { subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },32 { subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },33 { subURL: "/site/c", id: "SiteC", URLNAME: "Site C" },34 { subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },35 { subURL: "/site/c", id: "SiteC", URLNAME: "Site C" }36];37 38var megaMenuCategory = [39 { category: "DT", url: "www.gmail.com" },40 { category: "HR", url: "www.gmail.com" },41 { category: "IT", url: "www.gmail.com" }42];43 44var categoryMenu = [45 { category: "DT", menuItem: "DT-BT", menuUrl: "wwww.gmail.com" },46 { category: "DT", menuItem: "DT-SE", menuUrl: "wwww.gmail.com" },47 { category: "DT", menuItem: "DT-PI", menuUrl: "wwww.gmail.com" },48 { category: "HR", menuItem: "Human Resources", menuUrl: "wwww.gmail.com" },49 { category: "IT", menuItem: "IT-IO", menuUrl: "wwww.gmail.com" },50 { category: "IT", menuItem: "IT-CS", menuUrl: "wwww.gmail.com" }51];52 53createNavigation(myMockListData);54 55function myFunction() {56 var x = document.getElementById("myTopnav");57 if (x.className === "topnav") {58 x.className += " responsive";59 } else {60 x.className = "topnav";61 }62}63 64function createNavigation(navData) {65 // var headerElement = document.querySelector('#DeltaPlaceHolderPageHeader');66 var headerElement = document.getElementById("DeltaHorizontalQuickLaunch");67 headerElement.insertAdjacentHTML('afterend', '<div class="topnav" id="myTopnav"><a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a></div>');68 var topNav = document.getElementById("myTopnav");69 for (var x = 0; x < navData.length; x++) {70 if (navData[x].dropDown === "no") {71 var aLink = _createEl("a");72 var aTextNode = document.createTextNode(navData[x].URLNAME);73 aLink.href = navData[x].URL;74 aLink.appendChild(aTextNode);75 topNav.appendChild(aLink);76 } else if (navData[x].dropDown === "yes") {77 var buildSubNavigation;78 buildSubNavigation = buildSubNavBar(navData[x].id);79 topNav.appendChild(buildSubNavigation);80 } else {81 //build megamenu82 var buildSubNavigation;83 buildDirectorateNav = buildDirectorateMegaMenu(navData[x].id);84 }85 }86}87 88function buildDirectorateMegaMenu(navDataID) {89 var buildNav;90 // var headerElement = document.querySelector('#DeltaPlaceHolderPageHeader');91 var headerElement = document.getElementById("DeltaHorizontalQuickLaunch");92 var topNav = document.getElementById("myTopnav");93 buildNav = buildSubNavBar(navDataID, "training"); //Build mega menu and attach in buildSubNavBar()94 headerElement.appendChild(buildNav);95 topNav.appendChild(buildNav);96}97 98function buildSubNavBar(subNavID, isDirectorate) {99 //create div and add dropdown class100 var ddDiv = _createEl("div");101 if(isDirectorate === "training"){102 ddDiv.classList.add("Mdropdown");103 }else{104 ddDiv.classList.add("dropdown");105 }106 //create button and add text107 var btn = _createEl("button");108 if(isDirectorate === "training"){109 btn.classList.add("Mdropbtn");110 }else{111 btn.classList.add("dropbtn");112 }113 var btnText = document.createTextNode(subNavID);114 //append the text to the button115 btn.appendChild(btnText);116 117 //create i tag and add "fa fa-caret-down" classes118 var itag = _createEl("i");119 itag.classList.add("fa");120 itag.classList.add("fa-caret-down");121 itag.classList.add("fa-fw");122 btn.appendChild(itag);123 ddDiv.appendChild(btn);124 125 var ddContent = _createEl("div");126 ddContent.classList.add("dropdown-content");127 for (var i = 0; i < subList.length; i++) {128 if (subList[i].id === subNavID && subList[i].id !== "Training") {129 var li = _createEl("li");130 var a = _createEl("a");131 var aTextNode = document.createTextNode(subList[i].URLNAME);132 133 a.href = subList[i].subURL;134 a.appendChild(aTextNode);135 ddContent.appendChild(a); 136 }137 }138 139 if(isDirectorate === "training"){140 //alert("I ");141 //create div and add dropdown class142 var megaDivDropDown = _createEl("div");143 megaDivDropDown.classList.add("dropdown");144 145 var megaBtn = _createEl("button");146 megaBtn.classList.add("dropbtn");147 148 megaDivDropDown.appendChild(megaBtn);149 var megaI = _createEl("i");150 megaI.classList.add("fa");151 megaI.classList.add("fa-caret-down");152 153 megaBtn.appendChild(megaI);154 155 var megaDDivContent = _createEl("div");156 megaDDivContent.classList.add("Mdropdown-content");157 158 //Loop through categories & sub-categories items159 for (var i = 0; i < megaMenuCategory.length; i++) {160 161 var headerDiv = _createEl("div");162 headerDiv.classList.add("Mheader");163 164 var megaH2 = _createEl("h2");165 var h2Text = document.createTextNode(megaMenuCategory[i].category);166 167 megaH2.appendChild(h2Text);168 headerDiv.appendChild(megaH2);169 170 var megaDDivRow = _createEl("div");171 megaDDivRow.classList.add("Mrow");172 173 var megaDivCol = _createEl("div");174 megaDivCol.classList.add("Mcolumn");175 var colHr = _createEl("h3");176 var colHrText = document.createTextNode("");177 colHr.appendChild(colHrText);178 megaDivCol.appendChild(colHr);179 for (var x = 0; x < categoryMenu.length; x++) {180 if (megaMenuCategory[i].category === categoryMenu[x].category) {181 var colAnchor = _createEl("a");182 colAnchor.href = categoryMenu[x].menuUrl;183 var menuColText = document.createTextNode(categoryMenu[x].menuItem);184 colAnchor.appendChild(menuColText);185 186 megaDivCol.appendChild(colAnchor);187 megaDDivRow.appendChild(megaDivCol);188 headerDiv.appendChild(megaDDivRow);189 megaDDivContent.appendChild(headerDiv);190 ddDiv.appendChild(megaDDivContent);191 }192 }193 console.log("megaDdivRow:");194 console.log(ddDiv);195 }196 }197 ddDiv.appendChild(ddContent);198 return ddDiv;199} 200function _createEl(el) {201 return document.createElement(el);202}
0 コメント