https://www.german-brand-award.com/_assets/396a91bff0b3ddf7c5dbeaf6be6c0dcd/JavaScript/menu-navi.js?1790058915

1(function() {
2  'use strict';
3
4  // mobile navigation open submenu
5  let nodeList = document.getElementsByClassName('menu-sub');
6  if (nodeList) {
7    addEventListener(nodeList, 'click', function (el, id) {
8      this.parentElement.classList.toggle('submenuopen');
9    });
10    function addEventListener(nodeList, event, fn) {
11      for (let i = 0, len = nodeList.length; i < len; i++) {
12        nodeList[i].addEventListener(event, fn, false);
13      }
14    }
15  }
16
17  function findParentLi(el) {
18    let dest = null;
19    do {
20      if (el.tagName.toLowerCase() === 'li') return el;
21      el = el.parentElement || el.parentNode;
22    } while (el !== null && el.nodeType === 1);
23    return null;
24  }
25  // accessible main-menu
26  let navEls = document.querySelectorAll('nav.main-menu > ul > li');
27  for (let i = 0; i < navEls.length; i++) {
28    let subNav = navEls[i].getElementsByTagName('ul');
29    if (subNav && subNav.length > 0) {
30      let a = subNav[0].getElementsByTagName('a');
31      for (let o = 0; o < a.length; o++) {
32        // set tabindex to -1 to exclude all subnavigation links from tabindex
33        a[o].setAttribute('tabindex', '-1');
34        // second level eventlistener support for ArrowDown and ArrowUp
35        a[o].addEventListener('keydown', keydown);
36        function keydown(event) {
37          switch (event.key) {
38            // find next element
39            case 'ArrowDown':
40              let nextLi = event.target.parentNode.nextElementSibling;
41              while (nextLi && (nextLi.offsetParent === null || !nextLi.querySelector('a'))) {
42                nextLi = nextLi.nextElementSibling;
43              }
44              if (nextLi && nextLi.offsetParent !== null) {
45                let a = nextLi.querySelector('a');
46                if (a) {
47                  a.focus();
48                }
49              } else {
50                let li = findParentLi(event.target.parentNode.parentNode);
51                let a = li.querySelector('a');
52                if (a) {
53                  a.focus();
54                }
55              }
56              event.preventDefault();
57              event.stopPropagation();
58              break;
59            // find previous element
60            case 'ArrowUp':
61              let prevLi = event.target.parentNode.previousElementSibling;
62              while (prevLi && (prevLi.offsetParent === null || !prevLi.querySelector('a'))) {
63                prevLi = prevLi.previousElementSibling
64              }
65              if (prevLi && prevLi.offsetParent !== null) {
66                let a = prevLi.querySelector('a');
67                if (a) {
68                  a.focus();
69                }
70              } else {
71                let li = findParentLi(event.target.parentNode.parentNode);
72                let a = li.querySelector('a');
73                if (a) {
74                  a.focus();
75                }
76              }
77              event.preventDefault();
78              event.stopPropagation();
79              break;
80            case ' ':
81              let ul = event.target.parentNode.getElementsByTagName('ul');
82              if (ul && ul.length > 0) {
83                ul[0].style.display = 'block';
84                let a = ul[0].querySelector('li > a');
85                if (a) {
86                  a.focus();
87                }
88                ul[0].style.display = '';
89              }
90              event.preventDefault();
91              event.stopPropagation();
92              break;
93          }
94        }
95      }
96    }
97    // first level eventlistener for ArrowLeft, ArrowRight and ArrowDown
98    navEls[i].addEventListener('keydown', keydown);
99    function keydown(event) {
100      switch (event.key) {
101        case 'ArrowLeft':
102          let prevLi = event.target.parentNode.previousElementSibling;
103          while (prevLi && (prevLi.offsetParent === null || !prevLi.querySelector('a'))) {
104            prevLi = prevLi.previousElementSibling
105          }
106          if (prevLi) {
107            let a = prevLi.querySelector('a');
108            if (a) {
109              a.focus();
110            }
111          }
112          event.preventDefault();
113          event.stopPropagation();
114          break;
115        case 'ArrowRight':
116          let nextLi = event.target.parentNode.nextElementSibling;
117          while (nextLi && (nextLi.offsetParent === null || !nextLi.querySelector('a'))) {
118            nextLi = nextLi.nextElementSibling;
119          }
120          if (nextLi) {
121            let a = nextLi.querySelector('a');
122            if (a) {
123              a.focus();
124            }
125          }
126          event.preventDefault();
127          event.stopPropagation();
128          break;
129        // find first element
130        case 'ArrowDown':
131          let li = event.target.parentNode.querySelector('ul > li');
132          while (li && (li.offsetParent === null || !li.querySelector('a'))) {
133            li = li.nextElementSibling;
134          }
135          if (li) {
136            let a = li.querySelector('a');
137            if (a) {
138              a.focus();
139            }
140          }
141          event.preventDefault();
142          event.stopPropagation();
143          break;
144      }
145    }
146  }
147
148})();