https://chronofhorse.com/js/burger-menu.js?v=v1.93v

1// Simple Mobile Burger Menu
2document.addEventListener('DOMContentLoaded', function() {
3  
4  const burgerBtn = document.querySelector('.mobile-burger-btn');
5  const burgerOverlay = document.querySelector('.burger-menu-overlay');
6  
7  if (!burgerBtn || !burgerOverlay) {
8    setTimeout(() => {
9      initSimpleBurgerMenu();
10    }, 1000);
11    return;
12  }
13  
14  initSimpleBurgerMenu();
15});
16
17function initSimpleBurgerMenu() {
18  const burgerBtn = document.querySelector('.mobile-burger-btn');
19    const burgerOverlay = document.querySelector('.burger-menu-overlay');
20    const header = document.querySelector('.HEADER');
21  
22  if (!burgerBtn || !burgerOverlay) {
23    return;
24  }
25  
26  
27  // Click on burger button
28  burgerBtn.addEventListener('click', function(e) {
29    e.preventDefault();
30    
31      if (burgerOverlay.classList.contains('active')) {
32      closeBurger();
33    } else {
34      openBurger();
35    }
36  });
37  
38  // Close on overlay click
39  burgerOverlay.addEventListener('click', function(e) {
40    if (e.target === burgerOverlay) {
41      closeBurger();
42    }
43  });
44  
45  // Close on escape key
46  document.addEventListener('keydown', function(e) {
47    if (e.key === 'Escape' && burgerOverlay.classList.contains('active')) {
48      closeBurger();
49    }
50  });
51  
52  // Add dropdown functionality to burger menu items
53  initBurgerDropdowns();
54}
55
56function initBurgerDropdowns() {
57    const burgerNavItems = document.querySelectorAll('.burger-nav-item');
58
59    burgerNavItems.forEach(item => {
60        const chevron = item.querySelector('.burger-chevron');
61        const dropdownContent = item.nextElementSibling;
62
63        if (dropdownContent && dropdownContent.classList.contains('burger-dropdown-content') && chevron) {
64            // On écoute uniquement le clic sur le chevron
65            chevron.addEventListener('click', function (e) {
66                e.preventDefault();
67                e.stopPropagation();
68
69                const isOpen = dropdownContent.classList.contains('open');
70
71                // Ferme tous les autres dropdowns
72                document.querySelectorAll('.burger-dropdown-content').forEach(dropdown => {
73                    dropdown.classList.remove('open');
74                    const parentItem = dropdown.previousElementSibling;
75                    if (parentItem && parentItem.querySelector('.burger-chevron')) {
76                        parentItem.querySelector('.burger-chevron').classList.remove('rotated');
77                    }
78                });
79
80                // Ouvre/ferme le dropdown cliqué
81                if (!isOpen) {
82                    dropdownContent.classList.add('open');
83                    chevron.classList.add('rotated');
84                }
85            });
86        }
87    });
88}
89
90
91function openBurger() {
92  const burgerOverlay = document.querySelector('.burger-menu-overlay');
93  const burgerBtn = document.querySelector('.mobile-burger-btn');
94    const header = document.querySelector('.HEADER');
95          header.style.marginTop = `0px`;
96
97  burgerOverlay.classList.add('active');
98  burgerBtn.classList.add('active');
99    document.body.style.overflow = 'hidden';
100    header.classList.add('fixed-header');
101
102}
103
104function closeBurger() {
105  const burgerOverlay = document.querySelector('.burger-menu-overlay');
106  const burgerBtn = document.querySelector('.mobile-burger-btn');
107    const header = document.querySelector('.HEADER');
108    const topScrollAd = document.querySelector('.top-scroll-ad');
109    const topScrollAdHeight = topScrollAd.offsetHeight;
110  
111  burgerOverlay.classList.remove('active');
112  burgerBtn.classList.remove('active');
113    document.body.style.overflow = '';
114    header.classList.remove('fixed-header');
115        header.style.marginTop = `${topScrollAdHeight}px`;
116
117}