https://medellinsingles.com/imagemap/js/menu.js

1
2
3document.addEventListener('DOMContentLoaded', () => {
4  const header = document.querySelector('.mega-menu-header');
5  const dropdown = document.querySelector('.mega-dropdown-content');
6  const closeBtn = document.getElementById('modal-close-btn');
7  const sidenav = document.getElementById("mySidenav");
8
9  if (!header || !dropdown) return;
10
11  // Toggle dropdown on header click
12  header.addEventListener('click', (e) => {
13    e.stopPropagation();
14    // Check current position and toggle
15    if (dropdown.style.left === '0px') {
16      dropdown.style.left = '-100%';
17    } else {
18      dropdown.style.left = '0';
19    }
20    sidenav.style.width = "0";
21  });
22
23  // Close dropdown when clicking outside
24  document.addEventListener('click', (e) => {
25    if (!dropdown.contains(e.target) && !header.contains(e.target)) {
26      dropdown.style.left = '-100%';
27    }
28  });
29
30  // Close dropdown on close button
31  closeBtn?.addEventListener('click', (e) => {
32    e.stopPropagation();
33    dropdown.style.left = '-100%';
34  });
35
36  // Optional global function to close dropdown
37  window.closeModal2 = () => {
38    dropdown.style.left = '-100%';
39  };
40});
41
42
43
44
45function populateSelect(selectId, minValue, maxValue, defaultText) {
46    const select = document.getElementById(selectId);
47
48    // Prevent duplicate population
49    if (select.options.length > 1) return;
50
51    const defaultOption = document.createElement("option");
52    defaultOption.textContent = defaultText;
53    defaultOption.value = "";
54    defaultOption.selected = true;
55    select.appendChild(defaultOption);
56
57    for (let i = minValue; i <= maxValue; i++) {
58        const option = document.createElement("option");
59        option.value = i;
60        option.textContent = i;
61        select.appendChild(option);
62    }
63}
64(() => {
65// Add event listeners for the selects
66const ageBeginSelect = document.getElementById("age_begin");
67const ageLastSelect = document.getElementById("age_last");
68const weightMinSelect = document.getElementById("weight_min");
69const weightMaxSelect = document.getElementById("weight_max");
70
71  if (ageBeginSelect) {
72    ageBeginSelect.addEventListener("click", () => populateSelect("age_begin", 18, 66, "Min Age"));
73  }
74
75  if (ageLastSelect) {
76    ageLastSelect.addEventListener("click", () => populateSelect("age_last", 18, 66, "Max Age"));
77  }
78
79  if (weightMinSelect) {
80    weightMinSelect.addEventListener("click", () => populateSelect("weight_min", 75, 199, "Min Weight"));
81  }
82
83  if (weightMaxSelect) {
84    weightMaxSelect.addEventListener("click", () => populateSelect("weight_max", 80, 199, "Max Weight"));
85  }
86})();
87
88document.addEventListener("DOMContentLoaded", () => {
89
90  // === Header + Bottom nav scroll ===
91  const navbar = document.getElementById("mobile-navbar");
92  const bottomNav = document.getElementById("fixed-bottomNav");
93  if (!navbar || !bottomNav) return;
94
95  let prev = window.scrollY;
96  window.addEventListener("scroll", () => {
97    const up = prev > window.scrollY || window.scrollY < 50;
98    navbar.style.transform = up ? "translateY(0)" : `translateY(-${navbar.offsetHeight}px)`;
99    bottomNav.style.transform = up ? "translateY(0)" : `translateY(${bottomNav.offsetHeight}px)`;
100    prev = window.scrollY;
101  }, { passive: true });
102});
103
104// OFFCANVAS SIDE NAV
105/* Set the width of the side navigation  */
106function openNav() {
107  document.getElementById("mySidenav").style.width = "400px";
108}
109/* Set the width of the side navigation to 0 */
110function closeNav() {
111  document.getElementById("mySidenav").style.width = "0";
112}
113
114/* Close Side-nav when click outside */
115document.body.addEventListener("click", function (e) {
116  const sidenav = document.getElementById("mySidenav");
117
118  // check computed width instead of style.width
119  const width = parseInt(window.getComputedStyle(sidenav).width, 10);
120
121  if (width > 0 && !sidenav.contains(e.target)) {
122    closeNav();
123  }
124});
125
126// Scroll Close / Reopen logic
127window.addEventListener("scroll", function () {
128  const sidenav = document.getElementById("mySidenav");
129
130  if (document.body.matches(":hover")) {
131    closeNav();
132  }
133  if (sidenav.matches(":hover")) {
134    openNav();
135  }
136});
137
138document.addEventListener("DOMContentLoaded", () => {
139  const mainMenu = document.querySelector(".main-menu");
140
141  const menuItems = [
142    { buttonId: "has-submenu-getStarted", menuId: "getStartedMenu", backId: "backToMainMenu" },
143    { buttonId: "has-submenu-other-women-profile", menuId: "otherWomenProfileMenu", backId: "backToMainMenuFromotherWomenProfileMenu" },
144    { buttonId: "has-submenu-travelAndMeetHer", menuId: "travelAndMeetHerMenu", backId: "backToMainMenuFromtravelAndMeetHerMenu" },
145    { buttonId: "has-submenu-servicesAndOptions", menuId: "servicesAndOptionsMenu", backId: "backToMainMenuFromservicesAndOptionsMenu" },
146    { buttonId: "has-submenu-videos", menuId: "videosMenu", backId: "backToMainMenuFromVidiosMenu" },
147    { buttonId: "has-submenu-blog", menuId: "blogMenu", backId: "backToMainMenuFromblogMenu" },
148    { buttonId: "has-submenu-policies", menuId: "policiesMenu", backId: "backToMainMenuFrompoliciesMenu" },
149  ];
150

151  menuItems.forEach(({ buttonId, menuId, backId }) => {
152    const button = document.getElementById(buttonId);
153    const submenu = document.getElementById(menuId);
154    const backButton = document.getElementById(backId);
155
156    if (button && submenu && backButton) {
157      // 👉 open submenu
158      button.addEventListener("click", () => {
159        mainMenu.classList.add("hidden");
160        submenu.classList.add("active");
161        transferTextContent(button, submenu);
162      });
163
164      // 👉 back to main menu
165      backButton.addEventListener("click", () => {
166        submenu.classList.remove("active");
167        mainMenu.classList.remove("hidden");
168      });
169    }
170  });
171
172  // Reset to main menu when offcanvas opens
173  const offcanvasEl = document.getElementById("mobileMenu");
174  if (offcanvasEl) {
175    offcanvasEl.addEventListener("show.bs.offcanvas", () => {
176      document.querySelectorAll(".submenu").forEach((menu) =>
177        menu.classList.remove("active")
178      );
179      mainMenu.classList.remove("hidden");
180    });
181  }
182
183  // ✅ Dynamic submenu title
184  function transferTextContent(sourceElement, targetMenu) {
185    const textContent = sourceElement.textContent.trim();
186    const targetTextElement = targetMenu.querySelector(".submenu-text");
187    if (targetTextElement) {
188      targetTextElement.textContent = textContent;
189    }
190  }
191});