-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
40 lines (35 loc) · 1.43 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
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];
const navAnimation = (direction1, direction2) => {
navItems.forEach((nav, i) => {
nav.classList.replace(`slide-${direction1}-${i + 1}`, `slide-${direction2}-${i + 1}`);
});
};
const toggleNav = () => {
menuBars.classList.toggle('change');
overlay.classList.toggle('overlay-active');
if (overlay.classList.contains('overlay-active')) {
overlay.classList.replace('overlay-slide-left', 'overlay-slide-right');
navAnimation('out', 'in');
} else {
overlay.classList.replace('overlay-slide-right', 'overlay-slide-left');
navAnimation('in', 'out');
}
};
menuBars.addEventListener('click', toggleNav);
navItems.forEach((nav) => {
nav.addEventListener('click', toggleNav);
});
document.addEventListener('DOMContentLoaded', function () {
const scrollMessage = document.getElementById('scroll-message');
scrollMessage.classList.add('active');
window.addEventListener('scroll', function () {
scrollMessage.classList.remove('active');
});
});