blob: 84c789e8a944c8972813eff5a360dfbfaacd7e3f (
plain)
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
|
const burgerButton = document.querySelector(".mb-header__menu-btn");
const headerNavMobile = document.querySelector(".mb-header-nav");
const navCloseButton = document.querySelector(".mb-header-nav__close-btn");
const headerNavListItems = document.querySelectorAll(
".mb-header-nav-list__item"
);
const navigationButton = document.querySelector('.header-nav-list__nav-btn')
if(navigationButton) {
navigationButton.addEventListener('click', () => {
headerNavMobile.style.opacity = "0";
headerNavMobile.classList.add("active");
window.requestAnimationFrame(() => {
headerNavMobile.style.opacity = "1";
headerNavListItems.forEach((item, i) => {
setTimeout(() => {
item.style.opacity = 1;
}, 90 * i);
});
});
function closeHeaderNavHandler() {
headerNavMobile.style.opacity = "0";
setTimeout(() => {
headerNavListItems.forEach(item => {
item.style.opacity = 0;
});
headerNavMobile.classList.remove("active");
navCloseButton.removeEventListener("click", closeHeaderNavHandler);
}, 300);
}
navCloseButton.addEventListener("click", closeHeaderNavHandler);
})
}
if (burgerButton) {
burgerButton.addEventListener("click", () => {
headerNavMobile.style.opacity = "0";
headerNavMobile.classList.add("active");
window.requestAnimationFrame(() => {
headerNavMobile.style.opacity = "1";
headerNavListItems.forEach((item, i) => {
console.log(item);
setTimeout(() => {
item.style.opacity = 1;
}, 90 * i);
});
});
function closeHeaderNavHandler() {
headerNavMobile.style.opacity = "0";
setTimeout(() => {
headerNavListItems.forEach(item => {
item.style.opacity = 0;
});
headerNavMobile.classList.remove("active");
navCloseButton.removeEventListener("click", closeHeaderNavHandler);
}, 300);
}
navCloseButton.addEventListener("click", closeHeaderNavHandler);
});
}
|
