_menu_mobile.js
2.84 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
var addstuff = '<div class="list-wrapper2 list-wrapper"><button type="button" class="back-one-level"><span>Back</span></button><div class="sub-menu-wrapper"></div></div><div class="list-wrapper3 list-wrapper"><button type="button" class="back-one-level"><span>Back</span></button><div class="sub-menu-wrapper"></div></div>';
const pageHeader = document.querySelector("#main-nav");
const toggleMenu = pageHeader.querySelector(".mega-toggle-block");
const closeMenu = pageHeader.querySelector(".mega-menu-toggle.mega-menu-open");
const menuWrapper = pageHeader.querySelector("#mega-menu-primary");
menuWrapper.innerHTML =menuWrapper.innerHTML + addstuff;
const level1Links = pageHeader.querySelectorAll("li.mega-menu-item-has-children > a.mega-menu-link");
const listWrapper2 = pageHeader.querySelector(".list-wrapper2");
const listWrapper3 = pageHeader.querySelector(".list-wrapper3");
const subMenuWrapper2 = listWrapper2.querySelector(".sub-menu-wrapper");
const subMenuWrapper3 = listWrapper3.querySelector(".sub-menu-wrapper");
const backOneLevelBtns = pageHeader.querySelectorAll(".back-one-level");
const isVisibleClass = "is-visible";
const isActiveClass = "is-active";
for (const level1Link of level1Links) {
level1Link.addEventListener("click", function (e) {
const siblingList = level1Link.nextElementSibling;
console.log('clicked level1Links')
if (siblingList) {
e.preventDefault();
this.classList.add(isActiveClass);
const cloneSiblingList = siblingList.cloneNode(true);
subMenuWrapper2.innerHTML = "";
subMenuWrapper2.append(cloneSiblingList);
listWrapper2.classList.add(isVisibleClass);
}
});
}
listWrapper2.addEventListener("click", function (e) {
const target = e.target;
const parent = target.closest("a");
if (target.tagName.toLowerCase() === "a" && target.nextElementSibling) {
const siblingList = target.nextElementSibling;
e.preventDefault();
target.classList.add(isActiveClass);
const cloneSiblingList = siblingList.cloneNode(true);
subMenuWrapper3.innerHTML = "";
subMenuWrapper3.append(cloneSiblingList);
listWrapper3.classList.add(isVisibleClass);
}else if (parent.tagName.toLowerCase() === "a" && parent.nextElementSibling) {
const siblingList = parent.nextElementSibling;
e.preventDefault();
parent.classList.add(isActiveClass);
const cloneSiblingList = siblingList.cloneNode(true);
subMenuWrapper3.innerHTML = "";
subMenuWrapper3.append(cloneSiblingList);
listWrapper3.classList.add(isVisibleClass);
}
});
for (const backOneLevelBtn of backOneLevelBtns) {
backOneLevelBtn.addEventListener("click", function () {
const parent = this.closest(".list-wrapper");
parent.classList.remove(isVisibleClass);
// parent.previousElementSibling
// .querySelector(".is-active")
// .classList.remove(isActiveClass);
});
}