https://blog.muko.info/_assets/22cf45b1172aadb18e25b83cb2690c1d/JavaScript/header.js?1783036244

1// Change between mouse and keyboard modus
2$('body').keyup(function(e) {
3    // enable borders around focused item
4    if(e.key === "Tab") {
5        $('body').addClass("keyboardfocus-within");
6    }
7}).on('click', function(e) {
8    $('body').removeClass("keyboardfocus-within");
9});
10
11/* Header-Menü Layer */
12const transitionSpeed = 500;
13// OPEN NAVIGATION
14/**
15 * Have smooth opening on mouseenter
16 */
17$('#navbarMainContainer ul.tabset li.my-dropdown').on('mouseenter', function (event) {
18    const delay = 300;
19    $(this).delay(delay).queue(function() {
20        // show dropdown after short delay if still hovering
21        if($(this).is(":hover")) {
22            $(this).find('.dropdown-menu').fadeIn(transitionSpeed).queue(function() {
23                $(this).find('a.level2').first().focus();
24                $(this).dequeue();
25            });
26        }
27        $(this).dequeue();
28    });
29});
30/**
31 * Open main page if click on dropdown
32 */
33$('#navbarMainContainer ul.tabset li.my-dropdown a.dropdown-toggle').on('click', function (event) {
34    const a = $(this).parent().find('a.nav-link:not(.dropdown-toggle)');
35    const href = a.attr("href");
36    window.location = href;
37    return false;
38});
39
40/**
41 * Have fast opening and instant focus on keyboard opening
42 */
43$('#navbarMainContainer ul.tabset li.my-dropdown .nav-link.dropdown-toggle').on('keydown', function (event) {
44    if(event.code !== "Enter") { return; }
45
46    $(this).parent().find('.dropdown-menu').show();
47    $(this).parent().find('a.level2').first().focus();
48    return false;
49});
50/**
51 * mark focused main group
52 */
53$('#navbarMainContainer ul.tabset li.my-dropdown, #navbarMainContainer ul.tabset li.my-dropdown *').on('focus', function() {
54    const li = $(this).closest('li.my-dropdown');
55    if(!li.hasClass("focus")) {
56        $(this).closest('.tabset').find('li.focus').removeClass("focus");
57        li.addClass("focus");
58    }
59});
60
61// CLOSE NAVIGATION
62function mainnavClose(object, focus) {
63    const navItem = object.closest('.nav-item');
64    const dropdown = object.closest('.tabset').find('.dropdown-menu');
65
66    // hide navigation
67    if($('body').hasClass('keyboardfocus-within')) {
68        dropdown.hide();
69    } else {
70        dropdown.fadeOut(transitionSpeed);
71    }
72
73    // focus on toggle
74    if(focus === true) {
75        navItem.find('.dropdown-toggle').focus();
76    }
77}
78$('#navbarMainContainer ul.tabset li.nav-item').on('mouseleave', function() {
79    mainnavClose($(this), true);
80});
81$('#navbarMainContainer ul.tabset li.nav-item .nav-link').on('focus', function() {
82    if(!$(this).hasClass("focus")) {
83        mainnavClose($(this), false);
84    }
85});
86$('#navbarMainContainer ul.tabset li.nav-item .dropdown-menu').on('keydown', function(event) {
87    if(event.key === "Escape") {
88        mainnavClose($(this), true);
89    }
90});
91$('#navbarMainContainer ul.tabset li.nav-item .dropdown-menu .close').on('click keyup', function(event) {
92    if(event.type === "keyup" && event.key === "Escape" || event.type === "click") {
93        mainnavClose($(this), true);
94    }
95});
96
97
98
99
100
101
102// Navigation bei Klick öffnen mobile
103$('#navbarMainmobile .toggleNavigation').click(function() {
104    if($('#navbarMainContainer .my-navbar-toggler').is(":visible")) {
105        var target = $(this).attr("data-parent");
106        var dropdown = $('#navbarMainmobile .dropdown-menu[data-parent="' + target + '"]');
107
108        dropdown.toggleClass("show");
109        $(this).toggleClass("open");
110
111        return false;
112    }
113});
114
115// Ich bin... bei hover öffnen
116$('header#header .zielgruppen').mouseenter(function() {
117    var dropdown = $(this).find('.dropdown-menu');
118    dropdown.addClass("show");
119}).mouseleave(function() {
120    var dropdown = $(this).find('.dropdown-menu');
121    dropdown.removeClass("show");
122});
123
124// Suchleiste ausklappen wenn im Fokus
125$('header#header form.search input.sword').click(function(e) {
126    var form = $($(e.target)).closest('form');
127    form.addClass("selected");
128});
129$(document).click(function(ev) {
130    var target = $(ev.target);
131    var form = target.closest('form.search');
132    var header = form.closest('header#header');
133
134    if(!header.length) {
135        form = $('header#header form.search');
136        form.removeClass("selected");
137    }
138});
139
140// Navigation Sticky machen
141$(document).ready(function() {
142    var header = $('header#header .headerWrapper');
143    var body = $('body');
144    var height = header.outerHeight();
145
146    body.css("padding-top", height + "px");
147    header.addClass("fixed");
148
149    $(document).scroll(function() {
150        var header = $('header#header');
151
152        if($(document).scrollTop() > 150) {
153            header.addClass("notOnTop");
154        } else {
155            header.removeClass("notOnTop");
156        }
157    });
158
159    /* Infothek */
160    var pqiolmxbfhp_infothek_amount = document.cookie.split(';')
161        .map(c => c.trim())
162        .find(c => c.startsWith('infothek_amount')) || '=0';
163
164    pqiolmxbfhp_infothek_amount = pqiolmxbfhp_infothek_amount.split('=')[1] || 0;
165
166    document.querySelectorAll('.shoppingcart .quantity').forEach(el => el.innerText = pqiolmxbfhp_infothek_amount);
167
168    if (pqiolmxbfhp_infothek_amount > 0) {
169        $('.shoppingcart').show();
170        $('.shoppingcart-mobile').show();
171    }
172
173    // Layer-Menü
174    //initTabs();
175});
176
177// Wenn Mobile Navigation geöffnet wird Scroll auf Seite verbieten
178$('button[data-target="#navbarMainmobile"]').click(function() {
179    var body = $('body');
180    var overflow = body.css("overflow-y");
181    if(overflow === "hidden") {
182        body.css("overflow-y", "visible");
183    } else {
184        body.css("overflow-y", "hidden");
185    }
186});