https://www.burokoorts.nl/wp-content/themes/draadcore-child/js/menu.js?ver=1.1

1'use strict';
2window.menuBreakpoint = 1279;
3let windowWidth = window.innerWidth; 
4
5function initSubMenu () {
6    const parentItems = document.querySelectorAll('.menu-item-has-children');
7    parentItems.forEach(function ( element, key ) {
8        const parentLink = element.querySelector('a');
9        const subMenu = element.querySelector('.sub-menu');
10
11        subMenu.setAttribute('aria-hidden', 'true');
12        subMenu.setAttribute('hidden', 'hidden');
13        subMenu.id = 'sub-menu-' + key;
14
15        const toggle = document.createElement('button');
16        toggle.setAttribute('aria-expanded', 'false');
17        toggle.setAttribute('aria-controls', subMenu.id);
18        toggle.classList.add('sub-menu__toggle');
19        toggle.innerHTML = '<span class="sr-only">Open sub menu</span>';
20        parentLink.after(toggle);
21
22        toggle.onclick = toggleSubMenu;
23        element.onmouseenter = openSubMenu;
24        element.onmouseleave = closeSubMenu;
25
26        document.addEventListener('keydown', function ( event ) {
27            if (event.key === 'Escape') {
28                closeSubMenu.call(toggle);
29                toggle.focus();
30            }
31        });
32    });
33}
34
35function toggleSubMenu () {
36    const _self = this;
37    const parent = _self.parentNode;
38    const subMenu = parent.querySelector('.sub-menu');
39
40    if (_self.getAttribute('aria-expanded') === 'false') {
41        _self.setAttribute('aria-expanded', 'true');
42        subMenu.setAttribute('aria-hidden', 'false');
43        subMenu.removeAttribute('hidden');
44    } else {
45        _self.setAttribute('aria-expanded', 'false');
46        subMenu.setAttribute('aria-hidden', 'true');
47        subMenu.setAttribute('hidden', 'hidden');
48    }
49}
50
51function openSubMenu () {
52    const _self = this;
53    const parent = _self.parentNode;
54    let subMenu = parent.querySelector('.sub-menu');
55
56    _self.setAttribute('aria-expanded', 'true');
57    subMenu.setAttribute('aria-hidden', 'false');
58    subMenu.removeAttribute('hidden');
59
60    const toggles = subMenu.querySelectorAll('.sub-menu__toggle');
61    toggles.forEach(function ( element ) {
62        if (element !== _self) {
63            subMenu = element.parentNode.querySelector('.sub-menu');
64
65            element.setAttribute('aria-expanded', 'false');
66            subMenu.setAttribute('aria-hidden', 'true');
67            subMenu.setAttribute('hidden', 'hidden');
68        }
69    });
70}
71
72function closeSubMenu () {
73    const _self = this;
74    const parent = _self.parentNode;
75    const subMenu = parent.querySelector('.sub-menu');
76
77    _self.setAttribute('aria-expanded', 'false');
78    subMenu.setAttribute('aria-hidden', 'true');
79    subMenu.setAttribute('hidden', 'hidden');
80}
81
82function initSearch () {
83    const wrapper = document.querySelector('#header .search');
84    const open = document.querySelector('.navigation__search');
85    const close = document.querySelector('.navigation__search--close');
86
87    open.setAttribute('aria-expanded', 'false');
88    close.setAttribute('aria-expanded', 'false');
89    wrapper.setAttribute('aria-hidden', 'true');
90    wrapper.setAttribute('hidden', 'hidden');
91
92    open.onclick = openSearch;
93    close.onclick = closeSearch;
94
95    const searchQueries = document.querySelectorAll('.search__term');
96    searchQueries.forEach(function ( element ) {
97        element.onclick = fillSearch;
98    });
99}
100
101function openSearch () {
102    const wrapper = document.querySelector('#header .search');
103    const open = document.querySelector('.navigation__search');
104    const close = document.querySelector('.navigation__search--close');
105
106    open.setAttribute('aria-expanded', 'true');
107    close.setAttribute('aria-expanded', 'true');
108    wrapper.setAttribute('aria-hidden', 'false');
109    wrapper.removeAttribute('hidden');
110
111    open.onclick = closeSearch;
112}
113
114function closeSearch () {
115    const wrapper = document.querySelector('#header .search');
116    const open = document.querySelector('.navigation__search');
117    const close = document.querySelector('.navigation__search--close');
118
119    open.setAttribute('aria-expanded', 'false');
120    close.setAttribute('aria-expanded', 'false');
121    wrapper.setAttribute('aria-hidden', 'true');
122    wrapper.setAttribute('hidden', 'hidden');
123
124    open.onclick = openSearch;
125    open.focus();
126}
127
128function fillSearch () {
129    const _self = this;
130    const searchInput = document.querySelector('.search__input');
131    
132    searchInput.value = _self.innerText;
133
134}
135
136function iniResponsiveMenu () {
137    const open = document.getElementById('menu-mainmenu-open');
138    const close = document.getElementById('menu-mainmenu-close');
139    const menu = document.getElementById('menu-mainmenu');
140
141    open.setAttribute('aria-expanded', 'false');
142    open.setAttribute('aria-hidden', 'false');
143    open.removeAttribute('hidden');
144
145    close.setAttribute('aria-expanded', 'false');
146    close.setAttribute('aria-hidden', 'true');
147    close.setAttribute('hidden', 'hidden');
148
149    menu.setAttribute('aria-hidden', 'true');
150    menu.setAttribute('hidden', 'hidden');
151
152    open.addEventListener('click', openResponsiveMenu);
153    close.addEventListener('click', closeResponsiveMenu);
154}
155
156function unsetResponsiveMenu () {
157    const open = document.getElementById('menu-mainmenu-open');
158    const close = document.getElementById('menu-mainmenu-close');
159    const menu = document.getElementById('menu-mainmenu');
160
161    open.setAttribute('aria-expanded', 'true');
162    open.setAttribute('aria-hidden', 'true');
163    open.setAttribute('hidden', 'hidden');
164    close.setAttribute('aria-expanded', 'true');
165    close.setAttribute('aria-hidden', 'true');
166    close.setAttribute('hidden', 'hidden');
167    
168
169    menu.setAttribute('aria-hidden', 'false');
170    menu.removeAttribute('hidden');
171
172    open.removeEventListener('click', openResponsiveMenu);
173    close.removeEventListener('click', closeResponsiveMenu);
174}
175
176function openResponsiveMenu () {
177    const wrapper = document.querySelector('.navigation__container');
178    const open = document.getElementById('menu-mainmenu-open');
179    const close = document.getElementById('menu-mainmenu-close');
180    const menu = document.getElementById('menu-mainmenu');
181
182    open.setAttribute('aria-expanded', 'true');
183    open.setAttribute('aria-hidden', 'true');
184    open.setAttribute('hidden', 'hidden');
185    
186    close.setAttribute('aria-expanded', 'true');
187    close.setAttribute('aria-hidden', 'false');
188    close.removeAttribute('hidden');
189
190    menu.setAttribute('aria-hidden', 'false');
191    menu.removeAttribute('hidden');
192
193    wrapper.addEventListener('keydown', trapFocusResponsiveMenu);
194    close.focus();
195}
196
197function closeResponsiveMenu () {
198    const wrapper = document.querySelector('.navigation__container');
199    const open = document.getElementById('menu-mainmenu-open');
200    const close = document.getElementById('menu-mainmenu-close');
201    const menu = document.getElementById('menu-mainmenu');
202
203    open.setAttribute('aria-expanded', 'false');
204    open.setAttribute('aria-hidden', 'false');
205    open.removeAttribute('hidden');
206
207    close.setAttribute('aria-expanded', 'false');
208    close.setAttribute('aria-hidden', 'true');
209    close.setAttribute('hidden', 'hidden');
210
211    menu.setAttribute('aria-hidden', 'true');
212    menu.setAttribute('hidden', 'hidden');
213
214    wrapper.removeEventListener('keydown', trapFocusResponsiveMenu);
215    open.focus();
216}
217
218function trapFocusResponsiveMenu (e) {
219
220    // on tab
221    if (e.keyCode === 9) {
222
223        const wrapper = document.querySelector('.navigation__container');
224        const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not

224([tabindex="-1"])';
225        const focusableContent = wrapper.querySelectorAll(focusableElements);
226        const firstFocusableElement = focusableContent[0];
227        const lastFocusableElement = focusableContent[focusableContent.length - 1];
228        const focus = document.activeElement;
229
230        if (e.shiftKey) {
231            if (focus === firstFocusableElement) {
232                e.preventDefault();
233                lastFocusableElement.focus();
234            }
235        } else {
236            if (focus === lastFocusableElement) {
237                e.preventDefault();
238                firstFocusableElement.focus();
239            }
240        }
241
242    }
243
244}
245
246document.addEventListener('DOMContentLoaded', function () {
247    initSearch();
248    initSubMenu();
249
250    if (window.innerWidth <= window.menuBreakpoint) {
251        iniResponsiveMenu();
252    }
253});
254
255window.addEventListener('resize', function () {
256
257    if (window.innerWidth <= window.menuBreakpoint && windowWidth > window.innerWidth) {
258        iniResponsiveMenu();
259    } else if (window.innerWidth > window.menuBreakpoint && windowWidth <= window.innerWidth) {
260        closeResponsiveMenu();
261        unsetResponsiveMenu();
262    }
263
264    windowWidth = window.innerWidth;
265});
266
267window.addEventListener('scroll', function () {
268
269    if (window.innerWidth <= window.menuBreakpoint) return;
270
271    const header = document.querySelector('#header');
272    const topMenu = header.querySelector('.navigation__top');
273    const offset = topMenu.offsetHeight;
274
275    if (window.pageYOffset > offset) {
276        header.classList.add('navigation--scrolled');
277    } else {
278        header.classList.remove('navigation--scrolled');
279    }
280
281});