https://www.aacrao.org/wp-content/themes/yoko-aacrao-main/assets/js/megamenu.js?ver=1772759341

1//
2// This is for a version of the mega menu system that ONLY works on click, not hover.
3//
4
5document.addEventListener("DOMContentLoaded", function () {
6
7    function getNavbarHeight() {
8        const navbar = document.querySelector("header #navbar");
9        return navbar ? navbar.getBoundingClientRect().height : 0;
10    }
11
12    function closeAllMegaMenus() {
13        document.querySelectorAll(".mega-menu-group.open").forEach(menu => {
14            menu.classList.remove("open");
15        });
16
17        document.querySelectorAll(".has-mega-menu-focused").forEach(el => {
18            el.classList.remove("has-mega-menu-focused");
19        });
20    }
21
22    function openMenu(toggle, menuGroup) {
23        // Move menu after toggle
24        toggle.parentNode.insertBefore(menuGroup, toggle.nextSibling);
25
26        menuGroup.style.top = `${getNavbarHeight()}px`;
27
28        menuGroup.classList.add("open");
29        toggle.classList.add("has-mega-menu-focused");
30    }
31
32    function toggleMenu(toggle) {
33        const match = toggle.className.match(/toggle-mega-menu-(\d+)/);
34        if (!match) return;
35
36        const number = match[1];
37        const menuGroup = document.querySelector(`.mega-menu-group-${number}`);
38        if (!menuGroup) return;
39
40        const isOpen = menuGroup.classList.contains("open");
41
42        // Always reset state first
43        closeAllMegaMenus();
44
45        // If it was closed → open it
46        if (!isOpen) {
47            openMenu(toggle, menuGroup);
48        }
49    }
50
51    // Toggle click handler
52    document.querySelectorAll("[class*='toggle-mega-menu-']").forEach(toggle => {
53        toggle.addEventListener("click", function (event) {
54            event.preventDefault();
55            toggleMenu(this);
56        });
57    });
58
59    // Outside click handler
60    document.addEventListener("click", function (event) {
61
62        if (
63            event.target.closest("[class*='toggle-mega-menu-']") ||
64            event.target.closest(".mega-menu-group")
65        ) {
66            return;
67        }
68
69        closeAllMegaMenus();
70    });
71
72});