-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
46 lines (36 loc) · 1.26 KB
/
main.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
43
44
45
46
// the html tag
let header = document.querySelector('header')
// the menu button
let menuButton = document.querySelector('.toggler')
let nav = document.querySelector('nav')
// add event listener to the button
menuButton.addEventListener('click', () => {
//menuButton.classList.toggle('changeBtnImage')
if (!header.classList.contains('showHiddenItem')) {
header.classList.add('showHiddenItem')
menuButton.classList.add('changeBtnImage')
nav.classList.remove('slide-out')
nav.classList.add('slide-in')
} else {
nav.classList.remove('slide-in')
nav.classList.add('slide-out')
menuButton.classList.remove('changeBtnImage')
setTimeout(() => {
header.classList.remove('showHiddenItem')
}, 600);
}
});
// tha auchor tag, i want to disappear when the anyone being clicked
let aTag = document.querySelectorAll('nav a')
aTag.forEach(anchorTAg => {
anchorTAg.addEventListener('click', () => {
if (header.classList.contains('showHiddenItem')) {
nav.classList.remove('slide-in')
nav.classList.add('slide-out')
menuButton.classList.remove('changeBtnImage')
setTimeout(() => {
header.classList.remove('showHiddenItem')
}, 600);
}
})
})