https://www.oliveunion.com/jp/wp-content/themes/olive/assets/js/headerModern.js

1function setVhVariable() {
2    let vh = window.innerHeight * 0.01;
3    document.documentElement.style.setProperty('--vh', `${vh}px`);
4}
5setVhVariable();
6window.addEventListener('resize', setVhVariable);
7
8let isMobileHandlerActive = false;
9
10// Handle menu interactions for desktop
11function handleMenuInteraction() {
12    const menuItems = document.querySelectorAll('#header-new .header-new__inner #menu li');
13    
14    menuItems.forEach(li => {
15        const subMenu = li.querySelector('.header_sub');
16
17        li.addEventListener('mouseenter', () => {
18            if (subMenu) subMenu.classList.add('active');
19        });
20
21        li.addEventListener('mouseleave', () => {
22            if (subMenu) subMenu.classList.remove('active');
23        });
24
25        if (subMenu) {
26            subMenu.addEventListener('mouseenter', () => {
27                subMenu.classList.add('active');
28            });
29
30            subMenu.addEventListener('mouseleave', () => {
31                subMenu.classList.remove('active');
32            });
33        }
34    });
35}
36
37// Handle dropdown interactions for mobile
38function handleDropdownInteraction() {
39    const dropdowns = document.querySelectorAll('.dropd');
40
41    dropdowns.forEach(dropd => {
42        dropd.addEventListener('click', function(e) {
43            e.preventDefault();
44            e.stopPropagation();
45
46            const headerSub = this.closest('li') ? this.closest('li').querySelector('.header_sub') : null;
47            const dropdIcon = this;
48
49            if (headerSub) {
50                if (headerSub.classList.contains('active')) {
51                    headerSub.classList.remove('active');
52                    dropdIcon.classList.remove('active');
53                } else {
54                    headerSub.classList.add('active');
55                    dropdIcon.classList.add('active');
56                }
57            }
58        });
59    });
60}
61
62// Initialize menu based on screen size
63function initMenu() {
64    if (window.innerWidth >= 1024) {
65        if (isMobileHandlerActive) {
66            isMobileHandlerActive = false;
67            window.removeEventListener('resize', initMenu);
68        }
69        handleMenuInteraction();
70    } else {
71        if (!isMobileHandlerActive) {
72            isMobileHandlerActive = true;
73            handleDropdownInteraction();
74            window.addEventListener('resize', initMenu);
75        }
76    }
77}
78function toggleBodyStyles() {
79    var menuTriggers = document.querySelectorAll(".menu-trigger");
80    var anyActive = false;
81
82    menuTriggers.forEach(function(trigger) {
83        if (trigger.classList.contains("active")) {
84            anyActive = true;
85        }
86    });
87
88    if (anyActive) {
89        //document.body.style.position = 'fixed';
90        document.body.style.overflow = 'hidden';
91        
92    } else {
93        //document.body.style.position = 'static';
94        document.body.style.overflow = 'visible';
95    }
96}
97
98/*
99document.addEventListener("DOMContentLoaded", function() {
100    initMenu();
101    
102    var menuTriggers = document.querySelectorAll(".menu-trigger");
103    var menu = document.querySelector("#menu2");
104    
105    menuTriggers.forEach(function(trigger) {
106        trigger.addEventListener("click", function(e) {
107            e.preventDefault(); 
108            e.stopPropagation();
109            
110            this.classList.toggle("active");
111            
112            if (menu) {
113                menu.classList.toggle("active");
114            }
115
116            toggleBodyStyles();
117        });
118    });
119
120    toggleBodyStyles();
121});
122*/
123document.addEventListener("DOMContentLoaded", function() {
124    initMenu();
125    
126    var menuTriggers = document.querySelectorAll(".menu-trigger");
127    var menu = document.querySelector("#menu");
128    
129    menuTriggers.forEach(function(trigger) {
130        trigger.addEventListener("click", function(e) {
131            
132            this.classList.toggle("active");
133            
134            if (menu) {
135                menu.classList.toggle("active");
136            }
137
138            toggleBodyStyles();
139        });
140    });
141
142    toggleBodyStyles();
143});