JavaScript
1let myMockListData = [2 {3 URL: "/siteA.aspx",4 URLNAME: "Home",5 dropDown: "no",6 id: "home"7 },8 { URL: "/siteF.aspx", URLNAME: "Site F", dropDown: "training", id: "SiteF" },9 {10 URL: "/siteA.aspx",11 URLNAME: "Site A",12 dropDown: "yes",13 id: "SiteA"14 }15];16 17var subList = [18 { subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },19 { subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },20 { subURL: "/site/a", id: "SiteA", URLNAME: "Site A" }21];22 23var megaMenuCategory = [24 { category: "DT", url: "www.gmail.com" },25 { category: "親要素の文字数が多いとレイアウトが崩れる", url: "www.gmail.com" },26 { category: "IT", url: "www.gmail.com" }27];28 29var categoryMenu = [30 { category: "DT", menuItem: "DT-BT", menuUrl: "wwww.gmail.com" },31 { category: "DT", menuItem: "DT-SE", menuUrl: "wwww.gmail.com" },32 { category: "DT", menuItem: "DT-PI", menuUrl: "wwww.gmail.com" },33 { category: "親要素の文字数が多いとレイアウトが崩れる", menuItem: "Human Resources", menuUrl: "wwww.gmail.com" },34 { category: "IT", menuItem: "IT-IO", menuUrl: "wwww.gmail.com" },35 { category: "IT", menuItem: "IT-CS", menuUrl: "wwww.gmail.com" }36];37 38createNavigation(myMockListData);39 40function myFunction() {41 var x = document.getElementById("myTopnav");42 if (x.className === "topnav") {43 x.className += " responsive";44 } else {45 x.className = "topnav";46 }47}48 49function createNavigation(navData) {50 var headerElement = document.getElementById("DeltaHorizontalQuickLaunch");51 headerElement.insertAdjacentHTML('afterend', '<div class="topnav" id="myTopnav"><a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a></div>');52 var topNav = document.getElementById("myTopnav");53 for (var x = 0; x < navData.length; x++) {54 if (navData[x].dropDown === "no") {55 var aLink = _createEl("a");56 var aTextNode = document.createTextNode(navData[x].URLNAME);57 aLink.href = navData[x].URL;58 aLink.appendChild(aTextNode);59 topNav.appendChild(aLink);60 } else if (navData[x].dropDown === "yes") {61 var buildSubNavigation;62 buildSubNavigation = buildSubNavBar(navData[x].id);63 topNav.appendChild(buildSubNavigation);64 } else {65 //build megamenu66 var buildSubNavigation;67 buildDirectorateNav = buildDirectorateMegaMenu(navData[x].id);68 }69 }70}71 72function buildDirectorateMegaMenu(navDataID) {73 var buildNav;74 var headerElement = document.getElementById("DeltaHorizontalQuickLaunch");75 var topNav = document.getElementById("myTopnav");76 buildNav = buildSubNavBar(navDataID, "training"); //Build mega menu and attach in buildSubNavBar()77 headerElement.appendChild(buildNav);78 topNav.appendChild(buildNav);79}80 81function buildSubNavBar(subNavID, isDirectorate) {82 //create div and add dropdown class83 var ddDiv = _createEl("div");84 if(isDirectorate === "training"){85 ddDiv.classList.add("Mdropdown");86 }else{87 ddDiv.classList.add("dropdown");88 }89 //create button and add text90 var btn = _createEl("button");91 if(isDirectorate === "training"){92 btn.classList.add("Mdropbtn");93 }else{94 btn.classList.add("dropbtn");95 }96 var btnText = document.createTextNode(subNavID);97 //append the text to the button98 btn.appendChild(btnText);99 100 //create i tag and add "fa fa-caret-down" classes101 var itag = _createEl("i");102 itag.classList.add("fa");103 itag.classList.add("fa-caret-down");104 itag.classList.add("fa-fw");105 btn.appendChild(itag);106 ddDiv.appendChild(btn);107 108 var ddContent = _createEl("div");109 ddContent.classList.add("dropdown-content");110 for (var i = 0; i < subList.length; i++) {111 if (subList[i].id === subNavID && subList[i].id !== "Training") {112 var li = _createEl("li");113 var a = _createEl("a");114 var aTextNode = document.createTextNode(subList[i].URLNAME);115 116 a.href = subList[i].subURL;117 a.appendChild(aTextNode);118 ddContent.appendChild(a); 119 }120 }121 122 if(isDirectorate === "training"){123 //create div and add dropdown class124 var megaDivDropDown = _createEl("div");125 megaDivDropDown.classList.add("dropdown");126 127 var megaBtn = _createEl("button");128 megaBtn.classList.add("dropbtn");129 130 megaDivDropDown.appendChild(megaBtn);131 var megaI = _createEl("i");132 megaI.classList.add("fa");133 megaI.classList.add("fa-caret-down");134 135 megaBtn.appendChild(megaI);136 137 var megaDDivContent = _createEl("div");138 megaDDivContent.classList.add("Mdropdown-content");139 140 //Loop through categories & sub-categories items141 for (var i = 0; i < megaMenuCategory.length; i++) {142 143 var headerDiv = _createEl("div");144 headerDiv.classList.add("Mheader");145 146 var megaH2 = _createEl("h2");147 megaH2.appendChild(document.createTextNode(megaMenuCategory[i].category));148 headerDiv.appendChild(megaH2);149 150 var megaDDivRow = _createEl("div");151 megaDDivRow.classList.add("Mrow");152 153 var megaDivCol = _createEl("div");154 megaDivCol.classList.add("Mcolumn");155 var colHr = _createEl("h3");156 colHr.appendChild(document.createTextNode(""));157 megaDivCol.appendChild(colHr);158 for (var x = 0; x < categoryMenu.length; x++) {159 if (megaMenuCategory[i].category === categoryMenu[x].category) {160 var colAnchor = _createEl("a");161 colAnchor.href = categoryMenu[x].menuUrl;162 colAnchor.appendChild(document.createTextNode(categoryMenu[x].menuItem));163 164 megaDivCol.appendChild(colAnchor);165 megaDDivRow.appendChild(megaDivCol);166 headerDiv.appendChild(megaDDivRow);167 megaDDivContent.appendChild(headerDiv);168 ddDiv.appendChild(megaDDivContent);169 }170 }171 console.log("megaDdivRow:");172 console.log(ddDiv);173 }174 }175 ddDiv.appendChild(ddContent);176 return ddDiv;177} 178function _createEl(el) {179 return document.createElement(el);180}
0 コメント