My dropdown close automatically when the mouse leaves i am unable to click on sub-menu help me

Store Design
, ,
1

i have added the hover effect on the header but the drop-down menu item leaves before i can click on them so it’s like showing sub-menu on hover but it couldn’t get open.store url

let items = document
    .querySelector(".header__inline-menu")
    .querySelectorAll("details");

for (const item of items) {
    // Open the dropdown on hover
    item.addEventListener("mouseover", () => {
        item.setAttribute("open", true);
    });

    // Close the dropdown when mouse leaves the whole item (dropdown box)
    item.addEventListener("mouseleave", () => {
        item.removeAttribute("open");
    });
}
"i have inserted this Js Script for hover effect"

Screenshot 2024-09-10 110105.png
Screenshot 2024-09-10 110105.png1889×784 153 KB

2

Hi @odejia9587 ,

Try the below code please

let items = document
    .querySelector(".header__inline-menu")
    .querySelectorAll("details");

for (const item of items) {
    item.addEventListener("mouseover", () => {
        item.setAttribute("open", true);
    });

    item.addEventListener("mouseleave", (event) => {
        const submenu = item.querySelector("ul");
        if (!submenu || !submenu.contains(event.relatedTarget)) {
            item.removeAttribute("open");
        }
    });

    item.querySelector("ul").addEventListener("mouseover", () => {
        item.setAttribute("open", true);
    });

    item.querySelector("ul").addEventListener("mouseleave", (event) => {
        if (!item.contains(event.relatedTarget)) {
            item.removeAttribute("open");
        }
    });
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

1 Like
3

@odejia9587 , You can use this code to keep the submenu visible when the mouse leaves.

let items = document.querySelectorAll(".header__inline-menu details");
items.forEach(item => {
  let closeTimeout;

  item.addEventListener("mouseover", () => {
    clearTimeout(closeTimeout);
    item.setAttribute("open", true);
  });

  item.addEventListener("mouseleave", () => {
    closeTimeout = setTimeout(() => {
      item.removeAttribute("open");
    }, 400);
  });
  item.querySelector("ul").addEventListener("mouseenter", () => {
    clearTimeout(closeTimeout)
  });

  item.querySelector("ul").addEventListener("mouseleave", () => {
    closeTimeout = setTimeout(() => {
      item.removeAttribute("open");
    }, 400);
  });
});
1 Like
4

i applied it but it working with a little bit of lag or delay

5

@odejia9587 , change the code like this

let items = document.querySelectorAll(".header__inline-menu details");
items.forEach(item => {
    item.addEventListener("mouseover", () => {
      item.setAttribute("open", true);
      item.querySelector("ul").addEventListener("mouseleave", () => {
        item.removeAttribute("open");
      });
    item.addEventListener("mouseleave", () => {
      item.removeAttribute("open");
    });
  });
  });

And add this code before tag in theme.liquid file
1 Like
6

Thank you so much for helping i have searched it for everywhere

1 Like