https://zongoraszalon.hu/assets/js/zs-megamenu.js?v=11

1/* Teljes szélességű legördülő: a panel a fejléc teljes szélességében jelenik meg,
2   de a linklista a parent menüpont (pl. „Szolgáltatások", később „Shop") bal széléhez igazodik.
3   Csak desktopon (>=1200px) fut; mobilon az offcanvas menü a saját accordionját használja. */
4(function () {
5   function place(li) {
6      var header = li.closest('.tp-header-area');
7      if (!header) return;
8      if (getComputedStyle(header).position === 'static') return;
9      var sub = li.querySelector(':scope > .submenu');
10      if (!sub) return;
11      var off = li.getBoundingClientRect().left - header.getBoundingClientRect().left;
12      if (off < 0) off = 0;
13      sub.style.paddingLeft = off + 'px';
14   }
15   function all() {
16      document.querySelectorAll('.tp-main-menu-content > ul > li.has-dropdown-2').forEach(place);
17   }
18   function init() {
19      document.querySelectorAll('.tp-main-menu-content > ul > li.has-dropdown-2').forEach(function (li) {
20         place(li);
21         li.addEventListener('mouseenter', function () { place(li); });
22      });
23   }
24   if (document.readyState !== 'loading') init(); else document.addEventListener('DOMContentLoaded', init);
25   window.addEventListener('load', all);
26   window.addEventListener('resize', all);
27})();
28
29/* === Hover-re közös, oszlopos panel: bármelyik legördülő menüpont fölé érve
30   MINDEN menü (Shop + Szolgáltatások) almenüi megjelennek; elvéve bezár. === */
31(function () {
32   function isDesktop() { return window.innerWidth >= 1200; }
33   var closeTimer;
34   function scheduleClose() {
35      closeTimer = setTimeout(function () {
36         document.querySelectorAll('.zs-mega-all.open').forEach(function (p) { p.classList.remove('open'); });
37      }, 220);
38   }
39   function build(nav) {
40      var header = nav.closest('.tp-header-area'); if (!header) return null;
41      var ex = header.querySelector(':scope > .zs-mega-all'); if (ex) return ex;
42      var panel = document.createElement('div'); panel.className = 'zs-mega-all';
43      var row = document.createElement('div'); row.className = 'zs-mega-row';
44      // Sorrend: menü szerinti (Shop, majd Szolgáltatások)
45      var lis = Array.prototype.slice.call(nav.querySelectorAll(':scope > ul > li.has-dropdown-2'));
46      var anchorCol = null, anchorLi = lis.length ? lis[lis.length - 1] : null; // Szolgáltatások (utolsó legördülő)
47      lis.forEach(function (li) {
48         var a = li.querySelector(':scope > a');
49         var sub = li.querySelector(':scope > .submenu');
50         if (!sub) return;
51         var col = document.createElement('div'); col.className = 'zs-mega-col';
52         var t = document.createElement('div'); t.className = 'zs-mega-col-title';
53         t.textContent = a ? a.textContent.trim() : '';
54         col.appendChild(t);
55         col.appendChild(sub.cloneNode(true));
56         row.appendChild(col);
57         if (li === anchorLi) anchorCol = col;
58      });
59      panel.appendChild(row); header.appendChild(panel);
60      panel._anchorLi = anchorLi;   // a Szolgáltatások menüpont
61      panel._anchorCol = anchorCol; // a Szolgáltatások oszlop (ezt igazítjuk a menüpont alá)
62      panel.addEventListener('mouseenter', function () { clearTimeout(closeTimer); });
63      panel.addEventListener('mouseleave', scheduleClose);
64      return panel;
65   }
66   function openFor(li) {
67      var nav = li.closest('.tp-main-menu-content');
68      var header = li.closest('.tp-header-area');
69      var panel = build(nav);
70      document.querySelectorAll('.zs-mega-all.open').forEach(function (p) { if (p !== panel) p.classList.remove('open'); });
71      clearTimeout(closeTimer);
72      if (panel) {
73         // Aloldali (átlátszó) fejlécnél a panel a MENÜ aljához simuljon, hogy ne látszódjon
74         // a breadcrumb hero-sáv a menü és a panel között. A főoldali sötét fejléc marad top:100%.
75         if (header && header.classList.contains('tp-header-2-area')) {
76            var navEl = header.querySelector('.tp-main-menu-content');
77            if (navEl) {
78               var topPx = Math.round(navEl.getBoundingClientRect().bottom - header.getBoundingClientRect().top);
79               panel.style.top = topPx + 'px';
80            }
81         } else {
82            panel.style.top = '';
83         }

84         var row = panel.querySelector('.zs-mega-row');
85         if (row && panel._anchorCol && panel._anchorLi) {
86            row.style.paddingLeft = '0px';
87            void row.offsetWidth; // reflow a méréshez
88            var delta = panel._anchorLi.getBoundingClientRect().left - panel._anchorCol.getBoundingClientRect().left;
89            if (delta < 0) delta = 0;
90            row.style.paddingLeft = delta + 'px';
91         }
92         panel.classList.add('open');
93      }
94   }
95   function init2() {
96      document.querySelectorAll('.tp-main-menu-content > ul > li.has-dropdown-2').forEach(function (li) {
97         li.addEventListener('mouseenter', function () { if (isDesktop()) openFor(li); });
98         li.addEventListener('mouseleave', scheduleClose);
99      });
100   }
101   if (document.readyState !== 'loading') init2(); else document.addEventListener('DOMContentLoaded', init2);
102})();
103
104
105/* === BECHSTEIN oldal: a feher savsav (::after) aljat pontosan a menu aljahoz igazitjuk,
106   hogy a sav alja es a megamenu arany csikja egy magassagban legyen === */
107(function () {
108   function setBechsteinBarH() {
109      if (!document.body.classList.contains('bechstein-page')) return;
110      var header = document.querySelector('.tp-header-2-area');
111      var nav = header && header.querySelector('.tp-main-menu-content');
112      if (!header || !nav) return;
113      if (nav.offsetParent === null) { header.style.removeProperty('--zs-bar-h'); return; }
114      var h = Math.round(nav.getBoundingClientRect().bottom - header.getBoundingClientRect().top);
115      header.style.setProperty('--zs-bar-h', h + 'px');
116   }
117   window.addEventListener('load', setBechsteinBarH);
118   window.addEventListener('resize', setBechsteinBarH);
119   document.addEventListener('DOMContentLoaded', setBechsteinBarH);
120})();