Afficher un « menu burger »

**queen.ss** · 08/08/2021, 00h15

Hello,
Je débute dans le développement et j'ai besoin de votre aide car je n'arrive pas à exécuter mon code JS pour afficher "le menu burger"sur ma page web
Voici le code html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF—8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
	<title>SUGAR BEAUTIES</title>
	<link rel="stylesheet" href="styles.css"/>
</head>
<body>
	<nav class="navbar">
		<div class="navbar__container">
			<a href="/" id="navbar__logo">SUGAR BEAUTIES</a>
			<div class="navbar__toggle" id="mobile—menu">
				<span class="bar"></span>
				<span class="bar"></span>
				<span class="bar"></span>
			</div>	
			<ul class="navbar__menu">
				<li class="navbar__item">
					<a href="/" class="navbar__links">ACCUEIL</a>
				</li>
				<li class="navbar__item">
					<a href="/" class="navbar__links">MAQUILLAGE</a>
				</li>
				<li class="navbar__item">
					<a href="/" class="navbar__links">SOIN VISAGE</a>
				</li>
				<li class="navbar__btn">
					<a href="/" class="button">Se connecter</a>
				</li>
			</ul>	
		</div>
	</nav>
	<script  src="app.js"> </script>
</body>
</html>

Voici mon code js sur le fichier"app.js"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
const menu = document.querySelector('#mobile—menu')
const menuLinks = document.querySelector('.navbar__menu')
 
menu.addEventListener('click',function() {
	menu.classList.toggle('is—active');
	menuLinks.classList.toggle('active');
});

==> je tiens à préciser que j'ai essayé le code sur plusieurs navigateurs et ça ne marche pas

Merci d'avance pour votre aide

**jreaux62** · 08/08/2021, 12h57

bonjour,

puisque tu débutes,
il peut être intéressant de profiter de codes/scripts existants, et d'utiliser Bootstrap (4 voire 5), par exemple.
Si ça peut éviter de réinventer la roue...

**darkstar123456** · 10/08/2021, 12h23

Bonjour,

N'aimant pas réinventer la roue moi-même, je rejoins l'avis de @jreaux62

D'autant que je vois quelques problèmes ici.
Le plus gros problème étant que tout est basé sur du CSS mais qu'on a pas le droit de le voir

Du coup, en tout premier lieu, il faudrait utiliser l'inspecteur de ton navigateur pour t'assurer que les classes se toggle correctement et au bon endroit
Ensuite, il faudrait voir si le CSS fait bien ce qu'il faut (afficher/cacher les éléments)

**Dave Hiock** · 11/08/2021, 17h54

\ô/
pourquoi utiliser un marteau-pilon pour écraser une noisette ?

En l'état le script fonctionne bien, il manque effectivement juste la partie css pour juger de son interaction.

Afficher un « menu burger »

JavaScript

Vue hybride

Discussions similaires

Partager

Partager