How do I make my mega menu items container fixed when i hover on mega menu items

I am working on a Shopify project. In Shopify we can add navigation items, so I made a mega menu. When the user hovers on a item in the mega menu all the content inside that will be shown, but I want that to be fixed in a container where all nested items can be seen

https://i.sstatic.net/oFCRwpA4.png
https://i.sstatic.net/Dt5ehx4E.png
https://i.sstatic.net/XIe9GUuc.png

The previous issue I faced was whenever I hovered in it, items would slide away. I corrected that using Javascript, but now my problem is whenever I hover on any mega menu item the container which has all nested items should be fixed for all mega menu items. How can I achieve that?

<div class="shadow-xl"> 
<div class="container  mx-auto flex justify-between items-center px-0"> 
  <nav class="hidden lg:flex w-full text-base font-medium"> 
    <ul class="flex w-full justify-between p-3 space-x-2"> 
      {% for link in linklists.mini-header.links %}
        <li class="relative group text-gray-700 hover:bg-[#E87303] hover:text-white px-2 py-2 rounded whitespace-nowrap"> 
          {% if link.title == "Image" %}
            <img src="{{ 'saree' | image_url }}" alt="best sellers" class="h-6 w-6" width="24" height="24" />
          {% else %}
            <a href="{{ link.url }}" class="text-md">
              {{ link.title }}
            </a>
          {% endif %}
      
          {% if link.links != blank %}
            <div class="relative">
              <div class="absolute z-50 top-0 hidden mt-2 bg-white text-gray-700 rounded-lg shadow-lg group-hover:block dropdown-menu" style="width: 1200px;">
                <ul class="flex space-x-8 p-4">
                  {% for child in link.links %}
                    <li class="px-4 py-2 ">
                      <h3 class="font-bold font-playfair text-xl text-gray-900 px-2 py-2">{{ child.title }}</h3>
                      {% if child.links != blank %}
                        <ul class="space-y-2">
                          {% for grandchild in child.links %}
                            <li class="px-2 py-1" style="white-space: nowrap; width: 100%;">
                              <a href="{{ grandchild.url }}" class="block w-full">
                                {{ grandchild.title }}
                              </a>
                            </li>
                          {% endfor %}
                        </ul>
                      {% endif %}
                    </li>
                  {% endfor %}
                </ul>
              </div>
            </div>
          {% endif %}
        </li>
      {% endfor %}
      
    </ul>
  </nav>
</div>
</div>

<style>

nav ul li .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0; 
  z-index: 50;
  background-color: white;
  display: none; 
  max-width: 1400px; 
  white-space: nowrap;
}

nav ul li:hover .dropdown-menu {
  display: block;
}



</style>
<script>

document.addEventListener("DOMContentLoaded", function() {
  const dropdownMenus = document.querySelectorAll('.dropdown-menu');

  dropdownMenus.forEach(menu => {
    const parentLi = menu.closest('li');

    parentLi.addEventListener('mouseenter', function() {
      menu.style.left="0";
      menu.style.display = 'block';

      const rect = parentLi.getBoundingClientRect();
      const dropdownWidth = menu.offsetWidth;
      const overflowRight = (rect.right + dropdownWidth) - window.innerWidth;

      if (overflowRight > 0) {
        menu.style.left = `-${overflowRight}px`;
      } else {
        menu.style.left="0";
      }
    });

    parentLi.addEventListener('mouseleave', function() {
      menu.style.display = 'none';
    });
  });
});
  </script>

You need to sign in to view this answers

Related Post