https://www.hotelautrocadero.com/res/js/template/menu/mega/ui.js?q=1790003950067

1var initMenuMega = async () => {
2	const mainNav = document.getElementById('main-nav-menu-mega')
3	const mainMenu = document.getElementById('main-menu-mega')
4	const menuButton = document.getElementById('menu-toggle-mega')
5  const main = document.querySelector('main')
6	const heightNavigation = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--height-navigation'), 10);
7
8
9    /**
10     * Helper pour remplacer menu-src et menu-srcset
11     */
12  const replaceMenuSrcAttributes = (image) => {
13      if (image.hasAttribute('menu-src')) {
14          image.src = image.getAttribute('menu-src');
15          image.removeAttribute('menu-src');
16      }
17      if (image.hasAttribute('menu-srcset')) {
18          image.srcset = image.getAttribute('menu-srcset');
19          image.removeAttribute('menu-srcset');
20      }
21  };
22
23	/**
24	* Gestion du sticky menu
25	*/
26	const setStickyNav = () => {
27		const firstBlock = main.querySelector('[data-block-name]:first-child')
28		hasHero = firstBlock && firstBlock.classList.contains('hero')
29		// cibles les images dans la navbar uniquement et non main-menu pour gérer uniquement le sticky
30		const navbarImgs = mainNav.querySelectorAll('img[menu-src]:not(.main-menu img[menu-src])')
31		
32
33		const isSticky = window.scrollY > 0
34		if (hasHero) {
35			mainNav.classList.toggle('is-sticky', isSticky)
36			if (isSticky) {
37				navbarImgs.forEach(img => replaceMenuSrcAttributes(img))
38			}
39			return
40		}else{
41      mainNav.classList.add('is-sticky')
42			navbarImgs.forEach(img => replaceMenuSrcAttributes(img))
43			return
44		}
45	}
46
47	/**
48	* Fermeture du menu burger
49	*/
50	const closeMenu = () => {
51		mainNav.classList.toggle('menu-opened');
52		document.body.classList.toggle('overflow-hidden');
53    const images = mainMenu.querySelectorAll('[menu-src]');
54    images.forEach(img => replaceMenuSrcAttributes(img));
55	}
56
57	window.addEventListener('keydown', e => {
58		if (e.key === "Escape" && mainNav.classList.contains('menu-opened')) {
59			closeMenu();
60		}
61	});
62
63	// Initialisation sticky
64	setStickyNav();
65	window.addEventListener('scroll', setStickyNav, { capture: true, passive: true });
66
67	/**
68	* Gestion du scroll onepage
69	*/
70	if (document.body.classList.contains('onepage')) {
71		const sections = document.querySelectorAll('section[id]');
72		const links = mainMenu.querySelectorAll('a');
73
74		links.forEach(link => {
75			link.addEventListener('click', e => {
76				e.preventDefault();
77				const targetId = link.dataset.menu?.replace('#', '');
78				const target = document.getElementById(targetId);
79
80				if (target) {
81					closeMenu();
82					const top = target.offsetTop - heightNavigation;
83					window.scrollTo({ top, behavior: 'smooth' });
84				}
85			})
86		})
87
88		const changeMenuState = () => {
89			const scrollPosition = window.scrollY + heightNavigation + 100;
90			let activeIndex = -1;
91
92			sections.forEach((section, index) => {
93				if (scrollPosition >= section.offsetTop) {
94					activeIndex = index;
95				}
96			})
97
98			links.forEach(link => link.classList.remove('text-primary'));
99			if (activeIndex >= 0 && links[activeIndex]) {
100				links[activeIndex].classList.add('text-primary');
101			}
102		};
103
104		changeMenuState();
105		window.addEventListener('scroll', changeMenuState);
106	}
107
108	/**
109	* Click global pour fermer si clic en dehors
110	*/
111	document.addEventListener("click", e => {
112		if ((e.target.matches(".menu-toggle") || !e.target.closest(".main-nav")) && e.target.classList.contains("open")) {
113			closeMenu();
114		}
115	}, false);
116
117	/**
118	* Click sur le bouton burger
119	*/
120	menuButton.addEventListener('click', e => {
121		e.stopImmediatePropagation();
122		closeMenu();
123	}, { passive: true, capture: true });
124
125
126	// Slide imgs on menu items interaction (scopé par section)
127	const menuParent = mainMenu.querySelector('.top-nav');
128	// Tous les blocs menu
129	const menuSections = mainMenu.querySelectorAll('.menu-items');
130	// Big menu (celui à ne pas impacter quand on survole ailleurs)
131	const bigMenu = mainMenu.querySelector('.menu-items.big-menu');
132	// Toutes les images
133	const menuImages = mainMenu.querySelectorAll('.img-target');
134
135	menuSections.forEach(section => {
136		const items = section.querySelectorAll('a');
137		const isBigMenu = section === bigMenu;
138

139		items.forEach(item => {
140			item.addEventListener('mouseenter', () => {
141				const target = item.getAttribute('data-target') || '';
142
143				// 1) Toggle des classes UNIQUEMENT sur la section courante
144				// (et donc jamais sur .menu-items.big-menu si on n'est pas dedans)
145				items.forEach(el => {
146					if (el === item) {
147						el.classList.add('is-active');
148						el.classList.remove('is-inactive');
149					} else {
150						el.classList.add('is-inactive');
151						el.classList.remove('is-active');
152					}
153				});
154
155				// 2) MAJ des images PARTOUT (toujours, quel que soit le bloc survolé)
156				if (target) {
157					menuImages.forEach(img => {
158						if (img.getAttribute('data-target') === target) {
159							img.classList.add('is-active');
160							img.classList.remove('is-inactive');
161						} else {
162							img.classList.add('is-inactive');
163							img.classList.remove('is-active');
164						}
165					});
166				}
167			})
168
169			item.addEventListener('mouseleave', () => {
170				// Reset uniquement dans la section courante
171				items.forEach(el => el.classList.remove('is-active', 'is-inactive'));
172
173				// Reset global des images (comme dans ton code d’origine)
174				menuImages.forEach(img => img.classList.remove('is-active', 'is-inactive'));
175			});
176		});
177
178		// Optionnel : reset quand la souris quitte tout le bloc (pratique si grands gaps)
179		section.addEventListener('mouseleave', () => {
180			const sectionItems = section.querySelectorAll('a');
181			sectionItems.forEach(el => el.classList.remove('is-active', 'is-inactive'));
182			// on laisse les images se gérer au leave des items (déjà ci-dessus)
183		});
184	});
185
186	// Si la souris quitte tout le menu, retirer les classes
187	menuParent.addEventListener('mouseleave', () => {
188		menuSections.forEach(el => el.classList.remove('is-active', 'is-inactive'));
189		menuImages.forEach(img => img.classList.remove('is-active', 'is-inactive'));
190	});
191
192};