Animated hover dropdown menu for DAWN theme

Store Design
1

Hello, I am trying to make a hover dropdown menu animated and it is working only partly. The problem I have encountered is that when I hover over the menus once, I try to hover over it again it makes the menu invisible. It still drops down and I am able to click on the submenus but it is all invisible after hovering the first time. I have also tried changing duration values in base.css to give delay on dropdown (animation: animateMenuOpen var(–duration-default) ease; }) but was unable to make it work either. Any help would be appreciated. Thank you.

I have used this script for the hover menu

<script>
  let items = document.querySelector(".header__inline-menu").querySelectorAll("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");
    });
  });
  
  });
</script>

And used this style tag to animate the dropdown

<style>
.header__inline-menu details[open] > .header__submenu {
  animation: animateMenuOpen .3s ease !important;
}
</style>
1 Like
2

Thank you for reaching out here.

You could refer to this help document and tutorial video which will walk you step by step through setting up the dropdown menu.

If you find this answer is helpful, please mark it as a solution.

Best regards.