https://develux.com/wp-content/themes/develux/assets/js/components/menu.js

1export function menu() {
2    const menu = document.querySelectorAll('.dropdown_menu');
3    const submenu = document.querySelectorAll('.dropdown_submenu');
4
5    let i = 1;
6    menu.forEach((item) => {
7        if(i == 1) {
8            item.classList.add('active');
9        }
10        item.addEventListener('mouseover', () => {
11            menu.forEach((item) => {
12                item.classList.remove('active');
13            });
14            item.classList.add('active');
15        })
16        i++;
17    })
18
19    let j = 1;
20    submenu.forEach((item) => {
21        if(j == 1) {
22            item.classList.add('active');
23        }
24        item.addEventListener('mouseover', () => {
25            submenu.forEach((item) => {
26                item.classList.remove('active');
27            });
28            item.classList.add('active');
29        })
30        j++;
31    })
32
33
34    const dropdown = document.querySelectorAll('.dropdown')
35    const links_menu = document.querySelectorAll('.dropdown > a')
36    const dropdown_submenu = document.querySelectorAll('.dropdown_submenu')
37    const dropdown_submenu_link = document.querySelectorAll('.dropdown_menu > a')
38    const mega_menu = document.querySelectorAll('.mega_menu')
39    const simple_menu = document.querySelectorAll('.simple_menu')
40    const header = document.querySelector('header .header_full')
41
42
43    links_menu.forEach((link) => {
44        link.addEventListener('mouseenter', (e) => {
45            if (!link.closest('.dropdown').classList.contains('active')) {
46                removeActive(dropdown);
47            }
48            link.closest('.dropdown').classList.add('active')
49        })
50
51        link.addEventListener('mouseleave', (e) => {
52            link.closest('.dropdown').classList.remove('active')
53        })
54    })
55
56    dropdown_submenu_link.forEach((submenu) => {
57        submenu.addEventListener('mouseenter', () => {
58            removeActive(dropdown_submenu);
59            submenu.closest('.dropdown').classList.add('active')
60        })
61    })
62
63    mega_menu.forEach((menu) => {
64        menu.addEventListener('mouseenter', () => {
65            menu.closest('.dropdown').classList.add('active')
66        })
67
68        menu.addEventListener('mouseleave', () => {
69            menu.closest('.dropdown').classList.remove('active')
70        })
71    })
72
73    simple_menu.forEach((menu) => {
74        menu.addEventListener('mouseenter', () => {
75            menu.closest('.dropdown').classList.add('active')
76        })
77
78        menu.addEventListener('mouseleave', () => {
79            menu.closest('.dropdown').classList.remove('active')
80        })
81    })
82
83    window.addEventListener('scroll', () => {
84        const scrollPosition = window.scrollY;
85        if (scrollPosition > 0) {
86            header.classList.add('fixed');
87        } else {
88            header.classList.remove('fixed');
89        }
90    });
91
92    function removeActive(dropdown) {
93        dropdown.forEach((item) => {
94            item.classList.remove('active')
95        })
96    }
97
98
99}