0

I successfully created a mock-up navigation menu with a mega menu item (Directorate) in codepen, but it isn't working as I would hope.

When I try to implement it in my SharePoint site, this is what I get (screenshot attached): enter image description here

Any ideas why?

Here's the code:

var cacheNavData = [];
var cacheSubNavData = [];
var cacheMegaMenuData = [];
var cacheCategoryMenuData = [];

$(document).ready(function(){
 getData("Training Navigation").done(function(data1){
    cacheNavData = data1.d.results;
    getData("Sub Navigation").done(function(data2){
        cacheSubNavData = data2.d.results;
        getData("Mega Menu Category").done(function(data3){
            cacheMegaMenuData = data3.d.results;
            getData("category menu").done(function(data4){
                cacheCategoryMenuData = data4.d.results;
                megaMenu();
                createNavigation(cacheNavData);

                });
            });
        });
    });
})

function getData(lName){    

        if (lName != "Sub Navigation") {    
            var endPointUrl = "/otg/_api/web/lists/getbyTitle('" + lName + "')/items";
        }else {
            var endPointUrl ="/otg/_api/web/lists/getbyTitle('" + lName + "')/items?$select=parentNav/URL, parentNav/URLNAME,subLink&$expand=parentNav";
        }

        return $.ajax({
            url: endPointUrl,
            type: "GET",
            headers: {
                        "accept":"application/json;odata=verbose"
            }
        }); 
}


    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") {                 
                buildSubNavigation = buildSubNavBar(navData[x].URLNAME);
                topNav.appendChild(buildSubNavigation);
            } 
        }
    }

    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);
        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 < cacheSubNavData.length; i++) {  
            if (cacheSubNavData[i].parentNav.URLNAME === subNavID  && cacheSubNavData[i].parentNav.id !== "Directorate") {
                var li = _createEl("li");
                var a = _createEl("a");
                var aTextNode = document.createTextNode(cacheSubNavData[i].subLink.Description);

               // a.href = cacheSubNavData[i].subURL;
                a.href = cacheSubNavData[i].subLink.Url;
                a.appendChild(aTextNode);
                ddContent.appendChild(a);  
            }
        }
        ddDiv.appendChild(ddContent);
        return ddDiv;
    }

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


    function megaMenu(){
            var topNav = document.getElementById("myTopnav");
            var ddDiv = _createEl("div");
            ddDiv.classList.add("Mdropdown");

                    //create button and add text
             var btn = _createEl("button");
            btn.classList.add("Mdropbtn");

            //create div and add dropdown class
            var megaDivDropDown = _createEl("div");
            megaDivDropDown.classList.add("Mdropdown");

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

            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");
            for (var i = 0; i < cacheMegaMenuData.length; i++) {
            console.log("-->"+cacheMegaMenuData[i].Title);

                var megaDivCol = _createEl("div");
                megaDivCol.classList.add("Mcolumn");
                var colHr = _createEl("h3");
                var colHrText = document.createTextNode(cacheMegaMenuData[i].Title);
                colHr.appendChild(colHrText);
                megaDivCol.appendChild(colHr);
                for (var x = 0; x < cacheCategoryMenuData.length; x++) {
                console.log(cacheMegaMenuData[i].category)
                console.log(cacheCategoryMenuData[x].Title);
                    if (cacheMegaMenuData[i].Title === cacheCategoryMenuData[x].Title) {
                        var colAnchor = _createEl("a");
                        colAnchor.href = cacheCategoryMenuData[x].menuUrl;
                        var menuColText = document.createTextNode(cacheCategoryMenuData[x].menuItem);
                        colAnchor.appendChild(menuColText);     
                        megaDivCol.appendChild(colAnchor);
                        megaDDivRow.appendChild(megaDivCol);
                        megaDDivContent.appendChild(megaDDivRow);
                        ddDiv.appendChild(megaDDivContent);
                        console.log(ddDiv);
                    }
                }
            }
        topNav.appendChild(ddDiv);
        console.log(topNav)
    }

CSS Code

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

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

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

    .topnav .icon {
      display: none;
    }

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

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

    .dropdown-content {
      display: none;
      position: fixed !important;
      background-color: #f9f9f9  !important;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)v;
      z-index: 300 !important;
      color:black;
    }

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

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

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

    .dropdown:hover .dropdown-content {
      display: block;
      color:black !important;
    }

    @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;
      }
    }

1 Answer 1

1

The following code for your reference.

<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>
<style>
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: #333;
  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: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: #333;
  font-family: 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;
  }
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var cacheNavData = [];
var cacheSubNavData = [];
var cacheMegaMenuData = [];
var cacheCategoryMenuData = [];

$(document).ready(function(){
    getData("Training Navigation").done(function(data1){
        cacheNavData = data1.d.results;
        getData("Sub Navigation").done(function(data2){
            cacheSubNavData = data2.d.results;
            getData("Mega Menu Category").done(function(data3){
                cacheMegaMenuData = data3.d.results;
                getData("category menu").done(function(data4){
                    cacheCategoryMenuData = data4.d.results;
                    createNavigation(cacheNavData);
                });
            });
        });
    });
})
function getData(lName){
    var endPointUrl=_spPageContextInfo.webAbsoluteUrl;
    if (lName != "Sub Navigation") {    
        endPointUrl+= "/_api/web/lists/getbyTitle('" + lName + "')/items";
    }else {
        endPointUrl+="/_api/web/lists/getbyTitle('" + lName + "')/items?$select=parentNav/URL, parentNav/URLNAME,subLink&$expand=parentNav";
    }
    return $.ajax({
        url: endPointUrl,
        type: "GET",
        headers: {
            "accept":"application/json;odata=verbose"
        }
    }); 
}
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].URLNAME);
            topNav.appendChild(buildSubNavigation);
        } else {
            //build megamenu
            var buildSubNavigation;
            buildDirectorateNav = buildDirectorateMegaMenu(navData[x].URLNAME);
        }
    }
}

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

function buildSubNavBar(subNavID, isDirectorate) {
    //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
    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 < cacheSubNavData.length; i++) {
        if (cacheSubNavData[i].parentNav.URLNAME=== subNavID  && cacheSubNavData[i].parentNav.URLNAME !== "Training") {
            var li = _createEl("li");
            var a = _createEl("a");
            var aTextNode = document.createTextNode(cacheSubNavData[i].subLink.Description);

            a.href = cacheSubNavData[i].subLink.Url;
            a.appendChild(aTextNode);
            ddContent.appendChild(a);  
        }
    }

    if(isDirectorate === "training"){
        //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 < cacheMegaMenuData.length; i++) {
            var megaDivCol = _createEl("div");
            megaDivCol.classList.add("Mcolumn");
            var colHr = _createEl("h3");
            var colHrText = document.createTextNode(cacheMegaMenuData[i].category);
            colHr.appendChild(colHrText);
            megaDivCol.appendChild(colHr);
            for (var x = 0; x < cacheCategoryMenuData.length; x++) {
                if (cacheMegaMenuData[i].category === cacheCategoryMenuData[x].category) {
                    var colAnchor = _createEl("a");
                    colAnchor.href = cacheCategoryMenuData[x].menuUrl;
                    var menuColText = document.createTextNode(cacheCategoryMenuData[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);
}
</script>

The list design and result in screenshot below. enter image description here

5
  • Hi LZ_MSFT, what's the details of the 'Sub Navigation'? Are subLink and parentNav lookups into Training Navigation? I get the following error: /_api/web/lists/getbyTitle('Sub%20Navigation')/items?$select=parentNav/URL,%20parentNav/URLNAME,subLink&$expand=parentNav 400 (Bad Request)
    – OLA
    Feb 17, 2020 at 18:04
  • This is what I have 'Sub Navigation Settings': pasteboard.co/IV8J6ro.png subLink Column: pasteboard.co/IV8JNos.png parentNav column settings: pasteboard.co/IV8L1WB.png
    – OLA
    Feb 17, 2020 at 19:09
  • The "subLink" is a hyperlink field, and the "parentNav" is a lookup field from the "Training Navigation" list.
    – LZ_MSFT
    Feb 18, 2020 at 1:34
  • I still get an error..any ideas what I could be doing wrong?
    – OLA
    Feb 18, 2020 at 13:25
  • nevermind, I was able to figure it out. When I created the URLNAME column, SP changed the internal name to something else. Thank you so much for your help. You always come to my rescue when I really need it. Much appreciated!
    – OLA
    Feb 18, 2020 at 17:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.