-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
63 lines (40 loc) · 1.73 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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
var overlay = document.getElementById('overlay'),
closeMenu = document.getElementById('close-menu');
document.getElementById('open-menu').addEventListener('click', function() {
overlay.classList.add('show-menu');
document.getElementById('open-menu').style.opacity = '0';
});
document.getElementById('close-menu').addEventListener('click', function() {
overlay.classList.remove('show-menu');
document.getElementById('open-menu').style.opacity = '1';
});
//Hier wird eine Funktion erstellt, durch die, man mittels Esc-Key das Menü schließen kann.
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
overlay.classList.remove('show-menu');
document.getElementById('open-menu').style.opacity = '1';
}
};
// Hover effects für die Menü-Punkte
var pointsDiv = document.getElementById('points'),
point1 = document.getElementById('point1'),
point1 = document.getElementById('point2'),
point3 = document.getElementById('point3'),
openMenu = document.getElementById('open-menu');
openMenu.addEventListener('mouseover', function() {
pointsDiv.classList.add('animated-points');
point3.style.transform = "translateX(-100%)";
point1.style.transform = "translateX(100%)";
point1.style.color = "black";
point2.style.color = "black";
point3.style.color = "black";
});
openMenu.addEventListener('mouseout', function() {
pointsDiv.classList.remove('animated-points');
point1.style.transform = "translateX(0)";
point3.style.transform = "translateX(0)";
point1.style.color = "#514945";
point2.style.color = "#514945";
point3.style.color = "#514945";
});