https://3abn.org/js/newDesign-hover-1.js

1document.addEventListener('DOMContentLoaded', () => {
2
3    // Select elements
4    const navToggle = document.querySelector('.mobile-nav-toggle');
5    const mainNav = document.querySelector('.main-nav');
6    const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
7
8    // 1. MOBILE: Hamburger Menu Toggle
9    if (navToggle && mainNav) {
10        navToggle.addEventListener('click', () => {
11            mainNav.classList.toggle('active');
12
13            // Toggle Icon between Bars and Times (X)
14            const icon = navToggle.querySelector('i');
15            if (mainNav.classList.contains('active')) {
16                icon.classList.remove('fa-bars');
17                icon.classList.add('fa-xmark');
18            } else {
19                icon.classList.remove('fa-xmark');
20                icon.classList.add('fa-bars');
21            }
22        });
23    }
24
25    // 2. UNIVERSAL: Dropdown Toggles (Works on Mobile AND Desktop)
26    dropdownToggles.forEach(toggle => {
27        toggle.addEventListener('click', (e) => {
28            // Prevent the click from affecting anything else
29            e.preventDefault();
30            e.stopPropagation();
31
32            const parentLi = toggle.closest('.has-dropdown');
33            const isDesktop = window.innerWidth >= 992;
34
35            if (isDesktop) {
36                // --- DESKTOP LOGIC ---
37                // Do nothing on click, let CSS Hover handle it.
38                // Optionally allow default behavior if the toggle was a link, 
39                // but here it is a span/button, so preventDefault is fine.
40            } else {
41                // --- MOBILE LOGIC ---
42                // Simple toggle (open/close)
43                parentLi.classList.toggle('mobile-open');
44            }
45        });
46    });
47
48    // 3. GLOBAL CLICK LISTENER (Handles closing menus)
49    document.addEventListener('click', (e) => {
50        const isDesktop = window.innerWidth >= 992;
51
52        if (isDesktop) {
53            // --- DESKTOP: No need to close on click outside for hover menu ---
54        } else {
55            // --- MOBILE: Close Main Menu when clicking outside ---
56            // If menu is open AND click is NOT inside menu AND click is NOT on the toggle button
57            if (mainNav.classList.contains('active') &&
58                !mainNav.contains(e.target) &&
59                !navToggle.contains(e.target)) {
60
61                // Close the menu
62                mainNav.classList.remove('active');
63
64                // Reset the icon back to 'bars'
65                const icon = navToggle.querySelector('i');
66                if (icon) {
67                    icon.classList.remove('fa-xmark');
68                    icon.classList.add('fa-bars');
69                }
70            }
71        }
72    });
73
74});