https://www.basisschooljuniorcampus.nl/templates/buro26_2025/js/megamenu.js?77fd8f

1/**
2 * Mega menu
3 */
4jQuery(function () {
5    let windowWidth = jQuery(window).width();
6    jQuery('li.parent').append('<span class="show-deeper">')
7    jQuery('li.parent.active').find('.show-deeper').addClass('open');
8
9    if (windowWidth < 992) {
10        jQuery('li.parent.active').find('.nav-child').slideDown();
11    }
12
13    jQuery('li.parent .show-deeper').on('click', (e) => {
14        jQuery(e.target).siblings('ul').slideToggle(300)
15        jQuery(e.target).toggleClass('open')
16    });
17
18    handleMobileNav();
19    if (windowWidth > 992) {
20        handleMegaMenu();
21    }
22});
23
24
25function handleMobileNav() {
26    const navbar = jQuery('#navbarNav');
27
28
29    navbar.on('show.bs.collapse', () => {
30        jQuery('.navbar').slideDown(300);
31        jQuery('body').css({
32            overflow: 'hidden',
33            height: '100vh'
34        });
35    });
36
37    navbar.on('hide.bs.collapse', (e) => {
38        e.preventDefault();
39        jQuery('.navbar-toggler').attr('aria-expanded', false);
40        jQuery('.navbar').slideUp(300, () => {
41            navbar.removeClass('show');
42            navbar.attr('aria-expanded', false);
43        });
44
45        jQuery('body').css({
46            overflow: '',
47            height: ''
48        });
49    });
50}
51
52function handleMegaMenu() {
53    let megaMenu = jQuery("header #navigation");
54    let blackOverlay = jQuery(".black-overlay");
55    let level1Item = jQuery('.navbar li.nav-item.parent.level-1');
56
57    megaMenu.find('ul.nav-child').append('<span class="close-btn"><span class="material-symbols-outlined">close</span></span>');
58    level1Item.children('a').removeAttr('href')
59    jQuery(document).on('click', '.close-btn', closeMenu);
60
61    level1Item.click(function () {
62        if (jQuery(this).hasClass('active') && jQuery('.black-overlay').hasClass('show')) {
63            jQuery(this).removeClass('active');
64            closeMenu();
65            return;
66        }
67
68        jQuery('.navbar-nav > li.nav-item').removeClass('active');
69        jQuery(this).addClass('active');
70        jQuery('li.nav-item').children('ul.nav-child').hide();
71        jQuery('.navbar-nav > li.nav-item').removeClass('underline');
72        jQuery('.navbar-nav > li.nav-item').addClass('no-underline');
73        jQuery(this).addClass('underline');
74
75        jQuery(this).children('ul.nav-child').css('display', 'flex');
76        if (jQuery('.sub-wrapper-third ul li.active').length >= 1) {
77            let targetId = jQuery(this).find('.sub-wrapper-second li.active').data('id');
78            jQuery(this).find('.sub-wrapper-third ul.parent-' + targetId).show();
79        }
80        blackOverlay.addClass("show");
81    });
82
83    blackOverlay.click(closeMenu);
84
85    function closeMenu() {
86        jQuery('ul.nav-child').hide();
87        jQuery('.navbar-nav > li.nav-item').removeClass('underline');
88        jQuery('ul.nav-child .sub-wrapper-third > ul').hide();
89        jQuery('.navbar-nav > li.nav-item').removeClass('no-underline active');
90        blackOverlay.removeClass("show");
91    }
92
93    jQuery('.sub-wrapper-second li.nav-item').on('mouseover', function () {
94        let targetId = jQuery(this).data('id');
95        jQuery('body header .sub-wrapper-third ul').hide();
96        jQuery('.parent-' + targetId).show();
97    })
98}