Submenu Disappears Too Quickly When Hovering in Dawn Theme

[CarCleanCC]

Hello!

I am using the dawn theme and my URL is carcleansweden.se.

I recently changed so the menu options show while hovering. But now the submenu disappears too quickly when I try to move my mouse to select an option in the dropdown box:

This is what I changed in theme.liquid for the hovering effect: "

<script>

document.querySelectorAll('.header__menu-item.list-menu__item').forEach(item => {
item.addEventListener('mouseenter', () => {
item.parentElement.setAttribute('open', '');
});

item.addEventListener('mouseleave', () => {
item.parentElement.removeAttribute('open');
});
});

</script>

"

I would hugely appreciate the help!

[Dan-From-Ryviu]

Hi @CarCleanCC 

You can try to update your code to this code and check again 

<script>
document.querySelectorAll('.header__menu-item.list-menu__item').forEach(item => {
    let timeout;

    item.addEventListener('mouseenter', () => {
        clearTimeout(timeout); // Clear any existing timeout
        item.parentElement.setAttribute('open', '');
    });

    item.addEventListener('mouseleave', () => {
        // Set a timeout to delay the removal of the open attribute
        timeout = setTimeout(() => {
            item.parentElement.removeAttribute('open');
        }, 300); // Adjust the delay as needed (300ms here)
    });

    // Ensure the submenu remains open if the cursor is inside the submenu
    const submenu = item.querySelector('.submenu-class'); // Replace '.submenu-class' with the actual class of your submenu
    if (submenu) {
        submenu.addEventListener('mouseenter', () => {
            clearTimeout(timeout);
        });

        submenu.addEventListener('mouseleave', () => {
            timeout = setTimeout(() => {
                item.parentElement.removeAttribute('open');
            }, 300);
        });
    }
});
</script>

[CarCleanCC]

It seems to still disappear after a second. Is it possible to leave it there when I have my mouse over it?

Thank you for your help

[Dan-From-Ryviu]

Code updated

<script>
document.querySelectorAll('.header__menu-item.list-menu__item').forEach(item => {
    let timeout;

    // Function to open the menu
    const openMenu = () => {
        clearTimeout(timeout); // Clear any existing timeout
        item.parentElement.setAttribute('open', '');
    };

    // Function to close the menu
    const closeMenu = () => {
        timeout = setTimeout(() => {
            item.parentElement.removeAttribute('open');
        }, 300); // Delay before closing (300ms)
    };

    // Add event listeners to the menu item
    item.addEventListener('mouseenter', openMenu);
    item.addEventListener('mouseleave', closeMenu);

    // Add event listeners to the submenu
    const submenu = item.querySelector('.header__submenu'); // Replace '.submenu-class' with your submenu class
    if (submenu) {
        submenu.addEventListener('mouseenter', openMenu);
        submenu.addEventListener('mouseleave', closeMenu);
    }
});
</script>

[CarCleanCC]

Seems to still be a countdown. Is it possible for it to show at all times when my mouse Is hovering the submenu box?

Thank you

[Dan-From-Ryviu · Accepted solution]

Try this code instead and check again 

<script>
const inlineMenu = document.querySelector(".header__inline-menu");
const detailsItems = inlineMenu.querySelectorAll("details");
detailsItems.forEach(item => {
const ulElement = item.querySelector("ul");
item.addEventListener("mouseover", () => {
item.setAttribute("open", true);
ulElement.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
item.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
});
});
</script>