Seeking modifications to the CSS in order to enable functionality of the megamenu

Question

Seeking modifications to the CSS in order to enable functionality of the megamenu

I recently worked on a SharePoint project where I had to create a global navigation sourced from a SharePoint list. The implementation was successful, and I created a mock-up that can be viewed here.

While w3schools provided a static version, I utilized DOM manipulation to make it dynamic using an array of objects to simulate a SharePoint list.

One particular challenge I encountered was with creating a mega-menu for the "Directorate" menu item. I merged the CSS of the Navigation with the CSS of the mega-menu, causing issues. The problem seemed to arise when adding classes to elements in the loop through the menu items from the array. Specifically, giving the mega-menu item different class names 'Mdropdown' and 'Mdropbtn' caused conflicts.

CreateNavigation(navData) {
 // Existing code...
}

function buildSubNavBar(subNavID, isDirectorate) {
  // Existing code...
}

I have shared a CodePen link for better clarity. Changing line 115 to `ddDiv.classList.add("Mdropdown")` and line 118 to `btn.classList.add("Mdropbtn)` helped resolve the issue with the mega-menu but caused problems with other menu items.

In addition to this challenge, I added categories and sub-categories to further enhance the mega-menu functionality. Building the mega-menu involved complex interactions between various category elements within the menu.

If you have any suggestions or solutions to address the conflicting class names and improve the overall functionality of the mega-menu, please share them. Your assistance is greatly appreciated!

javascript html css dom sharepoint

Answer 1

Answer №1

Revise the buildSubNavBar function as shown below.

function updateSubNavMenu(subNavID, isDirectorate) {
    //create a div and apply dropdown CSS class
    var ddDiv = _createEl("div");
    if(isDirectorate === "directorate"){
        ddDiv.classList.add("Mdropdown");
    }else{
        ddDiv.classList.add("dropdown");
    }
    
    //create a button element and set 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 an i tag with classes "fa fa-caret-down"
    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"){
        //create another dropdown menu
        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");

        //Iterate through categories and 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);
                }
            }
            //add more elements
            console.log("megaDdivRow:")
            console.log(ddDiv);
        }
    }
    ddDiv.appendChild(ddContent);
    return ddDiv;
}

Answer 2

Revise the buildSubNavBar function as shown below.

function updateSubNavMenu(subNavID, isDirectorate) {
    //create a div and apply dropdown CSS class
    var ddDiv = _createEl("div");
    if(isDirectorate === "directorate"){
        ddDiv.classList.add("Mdropdown");
    }else{
        ddDiv.classList.add("dropdown");
    }
    
    //create a button element and set 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 an i tag with classes "fa fa-caret-down"
    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"){
        //create another dropdown menu
        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");

        //Iterate through categories and 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);
                }
            }
            //add more elements
            console.log("megaDdivRow:")
            console.log(ddDiv);
        }
    }
    ddDiv.appendChild(ddContent);
    return ddDiv;
}

Seeking modifications to the CSS in order to enable functionality of the megamenu

Answer №1

Similar questions

Detect the initial collision exclusively (Collision detection using raycasting)

The positioning of the parent element shifts as a result of the CSS

Select three random items from a string array list along with their corresponding indexes using TypeScript in Angular

Using the "this" keyword in JavaScript to access the "rel"

The result of jQuery is an Object Object in a dynamic and user-friendly web application

Utilize a Google Chrome extension to interact with the DOM of the active tab

Route.post() is in need of a callback function, however, it was provided with an [object String

Utilizing jQuery functions within Vue components in Quasar Framework

How come I'm unable to showcase the inventory of items to the customer even though they are saved in the database and visible in the Network tab on the console?

Iframe overlay feature functioning on Chrome but not on IE11

Is there a way to alter the background color of a Material UI card when it is being hovered over

The functionality of Regex in JavaScript is not meeting my expectations

The system is currently unable to find the specified element

collection of random header images for a ruby on rails website

Strangely behaving animated mobile navigation glitch

Can we create a collection of Vue highcharts components in a library format?

What steps do I need to follow in order to perform a particle design simulation on my laptop

The parameter of type 'X' cannot be assigned to the argument of type 'Y'

Issue with IE7 when using JQuery to repopulate a <ul> unordered list: new elements showing up under previously hidden elements

What is the best way to generate a complete PDF of a webpage using pdfmake?