reUseLib/burgerMenu.html at main · Fullofb3ans/reUseLib · GitHub

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
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="./css/burger.css" />
	</head>

	<body>
		<button class="" id="burgerMenuOpen">Open</button>
		<div class="burger-menu" id="burger-menu">
			<button class="" id="burgerMenuClose">Close</button>
		</div>
	</body>
	<script>
		const menuOpen = document.querySelector('#burgerMenuOpen');
		const menu = document.querySelector('#burger-menu');
		const menuClose = document.querySelector('#burgerMenuClose');
		if (menuOpen) {
			menuOpen.addEventListener('click', function () {
				if (menu) {
					menu.setAttribute('data-open', '');
				}
			});
		}
		if (menuClose) {
			menuClose.addEventListener('click', function () {
				if (menu) {
					menu.removeAttribute('data-open', '');
				}
			});
		}
	</script>
</html>