Cara Dropdown Menu di Shopify Muncul Saat Hover & Bisa Diklik

Wepotus.com – Salah satu kendala umum saat mengatur navigasi di Shopify adalah: dropdown menu hanya bisa muncul saat diklik, dan ketika berhasil dibuat muncul saat hover, justru menu utama tidak bisa diklik.

Jika kamu mengalami masalah ini, artikel ini akan membantumu mengaktifkan dropdown saat hover, tanpa menghilangkan fungsi klik pada menu utama, menggunakan solusi ringan dan kompatibel dengan mayoritas tema Shopify.

Mengapa Dropdown Menu Shopify Perlu Diubah?

Shopify secara default menggunakan struktur <details> dan <summary> untuk menu dengan submenu. Masalahnya:

• Dropdown hanya muncul saat diklik
• Menu utama tidak bisa diklik jika punya submenu
• Pengalaman pengguna (UX) jadi kurang optimal

Tujuan Kita

• Dropdown submenu muncul otomatis saat hover
• Menu utama tetap bisa diklik
• Kompatibel dengan mayoritas tema Shopify

Langkah-langkah Membuat Dropdown Hover & Klik Menu Utama

1. Edit HTML di Liquid

Buka file header-dropdown-menu.liquid dan ubah struktur <summary> seperti ini:

<summary
                id="HeaderMenu-{{ link.handle }}"
                class="header__menu-item list-menu__item link focus-inset"
                data-link="{{ link.url }}"
              >
                <a href="{{ link.url }}" class="header__link-inside-summary">
                  <span
                    {%- if link.child_active %}
                      class="header__active-menu-item"
                    {% endif %}
                  >
                    {{- link.title | escape -}}
                  </span>
                </a>
                {{- 'icon-caret.svg' | inline_asset_content -}}
              </summary>

2. Tambahkan JavaScript Hover + Klik

Tambahkan script berikut ke file menu-dropdown.js:

window.addEventListener("load", function () {
  const headerMenus = document.querySelectorAll('.header__inline-menu details');

  headerMenus.forEach((details) => {
    let timer;

    const summary = details.querySelector('summary');
    const clonedSummary = summary.cloneNode(true);
    summary.replaceWith(clonedSummary);

    details.addEventListener("mouseenter", () => {
      clearTimeout(timer);
      details.setAttribute("open", true);
    });

    details.addEventListener("mouseleave", () => {
      timer = setTimeout(() => {
        details.removeAttribute("open");
      }, 200);
    });
  });

  document.querySelectorAll('.header__inline-menu summary').forEach((summary) => {
    const link = summary.getAttribute('data-link');
    if (link) {
      summary.addEventListener('click', function (e) {
        if (e.target.closest('svg')) return;
        window.location.href = link;
      });
    }
  });
});

3. Tambahkan CSS

Tambahkan CSS berikut ke file base.css atau file styling utama kamu:

.header__link-inside-summary {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  width: 100%;
}

.header__submenu {
  display: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1000;
}

details[open] > .header__submenu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

Hasil Akhir

• ✅ Dropdown muncul saat hover
• ✅ Menu utama tetap bisa diklik
• ✅ Tidak merusak struktur tema bawaan Shopify

Kesimpulan

Dengan beberapa baris kode sederhana, kamu bisa memperbaiki masalah klasik dropdown di Shopify. Fitur ini sangat penting untuk memastikan pengguna bisa menavigasi toko online kamu dengan mudah dan cepat.

Gunakan teknik ini untuk meningkatkan UX dan SEO toko kamu secara keseluruhan.

---