Modify the way the menu functions using only CSS or Javascript

Question

Modify the way the menu functions using only CSS or Javascript

Looking to update a menu using only CSS or JavaScript. The menu is designed for an e-commerce website, featuring categories with collapsed subcategories. I'd like the sub-categories to automatically expand when the page loads, eliminating the need for users to click on them to view. The domain for this project is www.tackpal.com.

javascript css

Answer 1

Answer №1

After reviewing your website, I noticed that when a user clicks on a category, they are directed to the specific category's webpage. As a result, the subcategories are currently not displayed on the homepage.

Your initial suggestion is to modify the menu template in your CMS if it permits customization.

AN ALTERNATIVE APPROACH IS PROVIDED BELOW, ALTHOUGH MODIFYING THE TEMPLATE IN YOUR CMS WOULD BE PREFERABLE

By incorporating this code snippet, whenever a user visits the homepage, the following script will instruct the browser to make Ajax calls to all categories with subcategories. Upon receiving the source of each category page, it locates the list of subcategories and integrates them into the menu on the homepage accordingly.

To test this code, simply navigate to your website's homepage, open the console, and paste the initial functions followed by the script inside the onload function.

//Define a function to perform an AJAX call and execute a callback upon successful retrieval of the target page's source
function getSubPageSource(url, successCallback) {
    var xhr = XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            //Execute callback with the response text upon source retrieval
            successCallback(xhr.responseText);
        }
    };
    xhr.open('GET', url, true);
    xhr.send();
}

//Encapsulate within an onload event
window.onload = function() {  
    //Identify all categories with subcategories
    var categories = document.getElementsByClassName('has-subcategories');
    //Iterate through each category
    for (var ii = 0, nn = categories.length; ii < nn; ii++) {
        //Utilize a closure to pass a static index value
        (function(ii) {
            //Retrieve element
            var element = categories.item(ii);
            //Obtain ID
            var id = element.getAttribute('data-category');
            //Fetch URL
            var href = element.getAttribute('href');
            if (id && href) {
                //If found
                getSubPageSource(href, function(data) {
                    //Locate subcategories
                    //Extract section starting from where ID appears first
                    var substrSource = data.substr(data.indexOf('data-category="'+id+'"'));
                    //Remove remainder of the category title
                    substrSource = substrSource.substr(substrSource.indexOf('</a>'));
                    //Eliminate subsequent category finding
                    substrSource = substrSource.substr(0, substrSource.indexOf('home-categories-main'));
                    //Omit start of next category, retaining source of all subcategories
                    substrSource = substrSource.substring(0, substrSource.lastIndexOf('<a '))
                    //Insert after category title in main menu
                    console.log(id, substrSource);
                    //Create new node
                    var newNode = document.createElement("span");
                    //Inject source into new node
                    newNode.innerHTML = substrSource;
                    //Insert new node after current element
                    element.parentNode.insertBefore(newNode, element.nextSibling);
                });
            }
        })(ii);
    }
};

This implementation may solely function on the HOME PAGE ONLY, as testing beyond this scope has not been conducted. Application on other pages could potentially duplicate subcategory lists on respective category pages.

NOTE: A significant drawback of the featured technique is that whenever a visitor accesses your homepage, their browser simultaneously loads all category pages containing subcategories. As a result, your server will have to serve multiple pages for every homepage visit.

I highly recommend exploring options to customize the menu template in your CMS instead of utilizing the aforementioned script

Upon pasting the script above, your homepage should display the requisite links, visible in the accompanying screenshot below.

Answer 2

After reviewing your website, I noticed that when a user clicks on a category, they are directed to the specific category's webpage. As a result, the subcategories are currently not displayed on the homepage.

Your initial suggestion is to modify the menu template in your CMS if it permits customization.

AN ALTERNATIVE APPROACH IS PROVIDED BELOW, ALTHOUGH MODIFYING THE TEMPLATE IN YOUR CMS WOULD BE PREFERABLE

By incorporating this code snippet, whenever a user visits the homepage, the following script will instruct the browser to make Ajax calls to all categories with subcategories. Upon receiving the source of each category page, it locates the list of subcategories and integrates them into the menu on the homepage accordingly.

To test this code, simply navigate to your website's homepage, open the console, and paste the initial functions followed by the script inside the onload function.

//Define a function to perform an AJAX call and execute a callback upon successful retrieval of the target page's source
function getSubPageSource(url, successCallback) {
    var xhr = XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            //Execute callback with the response text upon source retrieval
            successCallback(xhr.responseText);
        }
    };
    xhr.open('GET', url, true);
    xhr.send();
}

//Encapsulate within an onload event
window.onload = function() {  
    //Identify all categories with subcategories
    var categories = document.getElementsByClassName('has-subcategories');
    //Iterate through each category
    for (var ii = 0, nn = categories.length; ii < nn; ii++) {
        //Utilize a closure to pass a static index value
        (function(ii) {
            //Retrieve element
            var element = categories.item(ii);
            //Obtain ID
            var id = element.getAttribute('data-category');
            //Fetch URL
            var href = element.getAttribute('href');
            if (id && href) {
                //If found
                getSubPageSource(href, function(data) {
                    //Locate subcategories
                    //Extract section starting from where ID appears first
                    var substrSource = data.substr(data.indexOf('data-category="'+id+'"'));
                    //Remove remainder of the category title
                    substrSource = substrSource.substr(substrSource.indexOf('</a>'));
                    //Eliminate subsequent category finding
                    substrSource = substrSource.substr(0, substrSource.indexOf('home-categories-main'));
                    //Omit start of next category, retaining source of all subcategories
                    substrSource = substrSource.substring(0, substrSource.lastIndexOf('<a '))
                    //Insert after category title in main menu
                    console.log(id, substrSource);
                    //Create new node
                    var newNode = document.createElement("span");
                    //Inject source into new node
                    newNode.innerHTML = substrSource;
                    //Insert new node after current element
                    element.parentNode.insertBefore(newNode, element.nextSibling);
                });
            }
        })(ii);
    }
};

This implementation may solely function on the HOME PAGE ONLY, as testing beyond this scope has not been conducted. Application on other pages could potentially duplicate subcategory lists on respective category pages.

NOTE: A significant drawback of the featured technique is that whenever a visitor accesses your homepage, their browser simultaneously loads all category pages containing subcategories. As a result, your server will have to serve multiple pages for every homepage visit.

I highly recommend exploring options to customize the menu template in your CMS instead of utilizing the aforementioned script

Upon pasting the script above, your homepage should display the requisite links, visible in the accompanying screenshot below.

Answer 3

Answer №2

To begin, it's important to determine how the menu is collapsing or expanding. Typically, a menu will collapse with one class and expand with another class that is added through JavaScript (or possibly switched)

Without examining the CSS, it's difficult to provide a specific solution. You can either modify the default class of the categories:

height:0;

or

display:none;

Remove this code and make sure to unbind any click functions associated with the menus to prevent unintended triggering when clicking on them.

Once again, without seeing the actual code, it's challenging to give precise advice.

Edit: Disregard my previous response, I visited the link you provided. It appears that the subcategories are loaded via an ajax call. After reviewing some minified JavaScript files, it seems that without access to the original source code, making adjustments may not be feasible.

Answer 4

To begin, it's important to determine how the menu is collapsing or expanding. Typically, a menu will collapse with one class and expand with another class that is added through JavaScript (or possibly switched)

Without examining the CSS, it's difficult to provide a specific solution. You can either modify the default class of the categories:

height:0;

or

display:none;

Remove this code and make sure to unbind any click functions associated with the menus to prevent unintended triggering when clicking on them.

Once again, without seeing the actual code, it's challenging to give precise advice.

Edit: Disregard my previous response, I visited the link you provided. It appears that the subcategories are loaded via an ajax call. After reviewing some minified JavaScript files, it seems that without access to the original source code, making adjustments may not be feasible.

Modify the way the menu functions using only CSS or Javascript

Answer №1

Answer №2

Similar questions

Unable to load JQuery from a div element

The ethereal essence of my breath hovers just beyond reach- I yearn for it

Fuzzy Background to Enhance Your Bootstrap 5 Offcanvas Navigation Menu

What are some strategies for receiving multiple responses with just one ajax request?

Graphql query using $http.post is unsuccessful

Encountering an error with NextJs & Strapi when utilizing the getStaticPaths functionality

Is there a way to have the even numbers in an array printed before the odd numbers?

Tips for creating a Bootstrap table with a "table-bordered" style, fixed header, and scrollable body

React: Render function did not return any content. This typically indicates that a return statement is missing

Learning the Basics of CSS: Understanding the Difference Between Float and Liquid Layout

TinyMCE Node Replacement Feature

Guide on selecting a specific title attribute as the chosen option in Angular by utilizing Bootstrap's selectpicker

How can I use jQuery to trigger a left or right movement on a Waterwheel Carousel?

Resetting the datetime picker in Eonasdan/bootstrap-datetimepicker using an external JavaScript function

Distinguishing between resolving a promise in a service/factory as opposed to in a controller within AngularJS

Incorporating the unshift method in JavaScript: A Step-by-

Ensuring that the second level unordered list is set to a height of 100% of the first unordered list, rather than the

How can I navigate to a different page using Node.js and Express?

The class "col-md-*" is not functioning properly when used with an Infragistics grid

encountering a problem with npm while trying to execute the project