Updates Mega menu

removes caret opens on hover clickable parent links
Misha-Puff · Mar 27, 2024 · 37cbd7e · 37cbd7e
1 parent d0270a0
commit 37cbd7e
Showing 1 changed file with 59 additions and 21 deletions.
diff --git a/snippets/header-mega-menu.liquid b/snippets/header-mega-menu.liquid
@@ -16,14 +16,21 @@
                 id="HeaderMenu-{{ link.handle }}"
                 class="header__menu-item list-menu__item link focus-inset"
               >
-                <span
-                  {%- if link.child_active %}
-                    class="header__active-menu-item"
+                <a
+                  href="{{ link.url }}"
+                  class="header__menu-item list-menu__item link link--text focus-inset"
+                  {% if link.current %}
+                    aria-current="page"
                   {% endif %}
                 >
-                  {{- link.title | escape -}}
-                </span>
-                {% render 'icon-caret' %}
+                  <span
+                    {%- if link.child_active %}
+                      class="header__active-menu-item"
+                    {% endif %}
+                  >
+                    {{- link.title | escape -}}
+                  </span>
+                </a>
               </summary>
               <div
                 id="MegaMenu-Content-{{ forloop.index }}"
@@ -71,24 +78,55 @@
             </details>
           </header-menu>
         {%- else -%}
-          <a
-            id="HeaderMenu-{{ link.handle }}"
-            href="{{ link.url }}"
-            class="header__menu-item list-menu__item link link--text focus-inset"
-            {% if link.current %}
-              aria-current="page"
-            {% endif %}
-          >
-            <span
-              {%- if link.current %}
-                class="header__active-menu-item"
-              {% endif %}
+          <details id="Details-HeaderMenu-{{ forloop.index }}">
+            <summary
+              id="HeaderMenu-{{ link.handle }}"
+              class="header__menu-item list-menu__item link focus-inset"
             >
-              {{- link.title | escape -}}
-            </span>
-          </a>
+              <a
+                id="HeaderMenu-{{ link.handle }}"
+                href="{{ link.url }}"
+                class="header__menu-item list-menu__item link link--text focus-inset"
+                {% if link.current %}
+                  aria-current="page"
+                {% endif %}
+              >
+                <span
+                  {%- if link.current %}
+                    class="header__active-menu-item"
+                  {% endif %}
+                >
+                  {{- link.title | escape -}}
+                </span>
+              </a>
+            </summary>
+          </details>
         {%- endif -%}
       </li>
     {%- endfor -%}
   </ul>
 </nav>
+
+{% comment %}
+  Enables megamenu open/close on hover
+{% endcomment %}
+<script>
+  function bindMouseOverToMegaMenu(item) {
+    item.addEventListener('mouseover', () => {
+      item.setAttribute('open', true);
+      item.querySelector('.mega-menu__content').addEventListener('mouseover', () => {
+        item.setAttribute('open', true);
+      });
+      item.querySelector('.mega-menu__content').addEventListener('mouseleave', () => {
+        item.removeAttribute('open');
+      });
+      item.addEventListener('mouseleave', () => {
+        item.removeAttribute('open');
+      });
+    });
+  }
+
+  let items = document.querySelector('.header__inline-menu').querySelectorAll('details.mega-menu');
+  console.log(items);
+  items.forEach(bindMouseOverToMegaMenu);
+</script>