EM-JS Mega Menu on Vsigntech

Solutions Menu

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Map your Menu Classes to your Image IDs
    const config = {
        '.link-1': '#image-1',
        '.link-2': '#image-2',
        '.link-3': '#image-3',
        '.link-4': '#image-4',
        '.link-5': '#image-5',
        '.link-6': '#image-6',
        '.link-7': '#image-7'
    };

    const allImages = document.querySelectorAll('.hover-image');

    Object.keys(config).forEach(linkClass => {
        const menuItems = document.querySelectorAll(linkClass);
        const targetImage = document.querySelector(config[linkClass]);

        menuItems.forEach(item => {
            item.addEventListener('mouseenter', function() {
                // 1. Hide all images
                allImages.forEach(img => {
                    img.style.opacity = '0';
                    img.style.visibility = 'hidden';
                    img.style.zIndex = '0';
                });
                // 2. Show the specific target image
                if(targetImage) {
                    targetImage.style.opacity = '1';
                    targetImage.style.visibility = 'visible';
                    targetImage.style.zIndex = '10';
                }
            });
        });
    });
});
</script>

<style>
    .hover-image {
        transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out !important;

        /* Set the default state to hidden for all images */
        opacity: 0;
        visibility: hidden;
    }

    /* Force the FIRST grid to be visible by default on page load. */
    #image-1 {
        opacity: 1;
        visibility: visible;
        z-index: 10;
    }
</style>

Products Menu

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Map your Menu Classes to your new Loop Grid Container IDs
    const config = {
        '.link-11': '#grid-11',
        '.link-12': '#grid-12',
        '.link-13': '#grid-13',
        '.link-14': '#grid-14',
        '.link-15': '#grid-15',
        '.link-16': '#grid-16',
        '.link-21': '#grid-21',
        '.link-22': '#grid-22',
        '.link-23': '#grid-23',
        '.link-24': '#grid-24'
    };

    // Change from .hover-image to .hover-grid
    const allGrids = document.querySelectorAll('.hover-grid');

    Object.keys(config).forEach(linkClass => {
        const menuItems = document.querySelectorAll(linkClass);
        const targetGrid = document.querySelector(config[linkClass]);

        menuItems.forEach(item => {
            item.addEventListener('mouseenter', function() {
                // 1. Hide all grids and push them to the back
                allGrids.forEach(grid => {
                    grid.style.opacity = '0';
                    grid.style.visibility = 'hidden';
                    grid.style.zIndex = '0'; 
                });

                // 2. Show the target grid and bring to the front
                if(targetGrid) {
                    targetGrid.style.opacity = '1';
                    targetGrid.style.visibility = 'visible';
                    targetGrid.style.zIndex = '10'; 
                }
            });
        });
    });
});
</script>

<style>
    /* Apply this class to all your Loop Grid widgets */
    .hover-grid {
        transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
        
        /* Set the default state to hidden for all grids */
        opacity: 0;
        visibility: hidden;
        
        /* Optional: If your grids aren't stacking neatly on top of each other 
           in Elementor, uncomment the lines below to force them to stack */
        /* position: absolute; */
        /* top: 0; */
        /* left: 0; */
        /* width: 100%; */
    }

    /* Force the FIRST grid to be visible by default on page load */
    #grid-11 {
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 10 !important;
    }
</style>

About Us Menu

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Map your Menu Classes to your Image IDs
    const config = {
        '.link-31': '#image-31',
        '.link-32': '#image-32',
        '.link-33': '#image-33',
    };

    const allImages = document.querySelectorAll('.hover-image');

    Object.keys(config).forEach(linkClass => {
        const menuItems = document.querySelectorAll(linkClass);
        const targetImage = document.querySelector(config[linkClass]);

        menuItems.forEach(item => {
            item.addEventListener('mouseenter', function() {
                // 1. Hide all images
                allImages.forEach(img => {
                    img.style.opacity = '0';
                    img.style.visibility = 'hidden';
                    img.style.zIndex = '0';
                });
                // 2. Show the specific target image
                if(targetImage) {
                    targetImage.style.opacity = '1';
                    targetImage.style.visibility = 'visible';
                    targetImage.style.zIndex = '10';
                }
            });
        });
    });
});
</script>

<style>
    .hover-image {
        transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out !important;

        /* Set the default state to hidden for all images */
        opacity: 0;
        visibility: hidden;
    }

    /* Force the FIRST grid to be visible by default on page load. */
    #image-31 {
        opacity: 1;
        visibility: visible;
        z-index: 10;
    }
</style>