Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I created a dynamic horizontal navigation bar from a array of objects. As my navigation items are getting rendered on the page, it's also linking each item. The issue I'm having is if the item has a drop down. I'm unable to do so. So for example, SiteA, SiteC and Training are dropdowns but they aren't links like the other ones.
Here's an excerpt of the code:
JavaScript
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);
		}
	}
}


Here's the pen[^] for more context

What I have tried:

I tried modifying the function but then the styling gets messed up.
JavaScript
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]);

			topNav.appendChild(buildSubNavigation);
		} else {
			//build megamenu
			var buildSubNavigation;
			buildDirectorateNav = buildDirectorateMegaMenu(navData[x]);
		}
	}
}


Here's the pen2[^]
Posted
Updated 18-Aug-20 20:22pm
v2

1 solution

The reason is you just add text in case of high level menu item as dropdown. You would need to pass on the url of main menu while making the sub menu build. During this, add the url to main menu too.

I have modified a little to show that, please make sure the other calls to methods are not broken:
JavaScript
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, navData[x].URLNAME); // CHANGE HERE
      
      var aLink = _createEl("a");
			var aTextNode = document.createTextNode(navData[x].URLNAME);
      //
      //
			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, "", "training");  //Build mega menu and attach in buildSubNavBar() // CHANGE HERE to pass dummy URL
	topNav.appendChild(buildNav);
}

function buildSubNavBar(subNavID, subNavURL, isDirectorate) { //CHANGE HERE - added URL as one more parameter.
    //create div and add dropdown class
    var ddDiv = _createEl("div");
    if(isDirectorate === "training"){
        ddDiv.classList.add("Mdropdown");
    }else{
        ddDiv.classList.add("dropdown");
    }
    //create button and add text
    var btn = _createEl("button");
    if(isDirectorate === "training"){
        btn.classList.add("Mdropbtn");
    }else{
        btn.classList.add("dropbtn");
    }
    var btnText = document.createTextNode(subNavID);
    //append the text to the button
    // CHANGE HERE
    // ADDED link instead of text
     var aLink = _createEl("a");
		 var btnText = document.createTextNode(subNavID);
		 aLink.href = subNavURL;
		 aLink.appendChild(btnText);
		 btn.appendChild(aLink);
    //

    ...

Marked changes made with comment: CHANGE HERE
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900