-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
42 lines (39 loc) · 1.3 KB
/
script.js
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
const menuBars = document.getElementById("menu-bars");
const overlay = document.getElementById("overlay");
const nav1 = document.getElementById("nav-1");
const nav2 = document.getElementById("nav-2");
const nav3 = document.getElementById("nav-3");
const nav4 = document.getElementById("nav-4");
const nav5 = document.getElementById("nav-5");
const navItems = [nav1, nav2, nav3, nav4, nav5];
// Control navigation animation
function navAnimation(direction1, direction2) {
navItems.forEach((nav, i) => {
nav.classList.replace(
`slide-${direction1}-${i + 1}`,
`slide-${direction2}-${i + 1}`
);
});
}
function toggleNav() {
// Toggle menu bars open/closed
menuBars.classList.toggle("change");
// Togglel menu active
overlay.classList.toggle("overlay-active");
if (overlay.classList.contains("overlay-active")) {
// Animate in overlay
overlay.classList.replace("overlay-slide-left", "overlay-slide-right");
// Animate in nav items
navAnimation("out", "in");
} else {
// Animate out overlay
overlay.classList.replace("overlay-slide-right", "overlay-slide-left");
// Animate out nav items
navAnimation("out", "in");
}
}
// Event listeners
menuBars.addEventListener("click", toggleNav);
navItems.forEach((nav) => {
nav.addEventListener("click", toggleNav);
});