https://vivana-fitness.de/_js/bfrei.js?1

1$(document).ready(function() {
2  // Alle Hauptmenüpunkte mit Dropdown
3  $(".navi li.drop > a").each(function() {
4    var $trigger = $(this);
5    var $parent = $trigger.parent();
6    var $submenu = $parent.find(".subnavi");
7
8    // ARIA setzen
9    $trigger.attr("aria-haspopup", "true");
10    $trigger.attr("aria-expanded", "false");
11
12    // Wenn Fokus auf Hauptmenüpunkt (Tab) -> Dropdown öffnen
13    $trigger.on("focus", function() {
14      $submenu.addClass("keyboard-open");
15      $trigger.attr("aria-expanded", "true");
16    });
17
18    // Letzter Unterpunkt -> Tab -> Dropdown schließen
19    $submenu.find("a").last().on("keydown", function(e) {
20      if (e.key === "Tab" && !e.shiftKey) {
21        $submenu.removeClass("keyboard-open");
22        $trigger.attr("aria-expanded", "false");
23      }
24    });
25
26    // Shift+Tab auf Hauptlink -> Dropdown schließen
27    $trigger.on("keydown", function(e) {
28      if (e.key === "Tab" && e.shiftKey) {
29        $submenu.removeClass("keyboard-open");
30        $trigger.attr("aria-expanded", "false");
31      }
32    });
33
34    // Esc-Taste -> Dropdown schließen
35    $parent.on("keydown", function(e) {
36      if (e.key === "Escape") {
37        $submenu.removeClass("keyboard-open");
38        $trigger.attr("aria-expanded", "false");
39        $trigger.focus();
40      }
41    });
42
43    // Fokus komplett weg -> Dropdown schließen
44    $submenu.on("focusout", function() {
45      setTimeout(function() {
46        if (!$parent.has(document.activeElement).length) {
47          $submenu.removeClass("keyboard-open");
48          $trigger.attr("aria-expanded", "false");
49        }
50      }, 50);
51    });
52  });
53});
54
55
56
57
58
59
60
61$(document).on('focusin', function (e) {
62	
63	// Navigation ist im Focus	
64	if ($('.naviwrapper').has(e.target).length) {
65		$('.naviwrapper').addClass('active');	  
66	}
67
68	// Prüft, ob ein Element innerhalb eines Dropdowns den Fokus hat
69		if ($(e.target).closest('.dropdown').length) {
70		// Findet das übergeordnete .drop und fügt die Klasse active hinzu
71		$(e.target).closest('.drop').addClass('active');
72	}
73	
74	// Header wird bei focus voll dargestellt
75	if ($(e.target).closest('.header').length) {
76		$('.header').removeClass('scrolled');
77		$('.header').addClass('bg-black');
78	}
79});
80
81
82
83
84
85
86
87$(document).on('focusout', function (e) {
88	const newFocus = e.relatedTarget || document.activeElement;
89
90	// Wenn kein neues Fokuselement existiert oder body selbst fokussiert ist, abbrechen
91	if (!newFocus || newFocus === document.body) return;
92
93	// Überprüft, ob der neue Fokus noch im Dropdown liegt
94	if (!$(newFocus).closest('.dropdown').length) {
95		$(e.target).closest('.drop').removeClass('active');
96	}
97
98	// Überprüft, ob der neue Fokus noch in der .naviwrapper liegt
99	if (!$(newFocus).closest('#navi').length) {
100		$('.naviwrapper').removeClass('active');
101	}
102});
103
104
105
106
107
108
109
110$(function () {
111	
112	$('#navtrigger').on('click', function () {
113	  $('.naviwrapper').addClass('active');
114	  $('#navi a:first').focus();
115	});
116	
117
118	
119});
120