Menu déroulant en mode tactile

Version imprimable

Salut tout le forum.

J'ai besoin de votre aide.

Je souhaite réaliser un menu déroulant qui fonctionne en tactile (surface pro 4 et Microsoft Edge)

J'ai fait des recherches et j'en ai trouvé qui me conviendrait ici(codepen.io) mais je n'arrive pas à le coder correctement.

Code:

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
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="/css/menu.css"/>
 
		<script type="text/javascript">
 
                        (function() {
                          var tabMenu = document.querySelectorAll('.deroule');
                          var tabD = document.querySelectorAll('ul ul');
                          function deroule(e){
                                e.stopPropagation(); 
                                obj = this.querySelector('ul');
                                if(!this.open){
                                  tabMenu.forEach(ferme);
                                  obj.style.display = "block";
                                  this.open = true;
                                }else{
                                  obj.style.display = "none";
                                  this.open = false;
                                }
                          }
                          var ferme = function(obj,i){
                                tabD[i].style.display = "none";
                                obj.open = false;
                          }
                          var init = function(obj){
                                obj.addEventListener("click",deroule);
                                obj.open = false;
                          }
                          tabMenu.forEach(init);
                          window.addEventListener("click",function(){
                                tabMenu.forEach(ferme);
                          });
                          window.addEventListener("scroll",function(){
                                tabMenu.forEach(ferme);
                          });
                        })();
 
                </script>
 
		<title>test.php</title>
	</head>
	<body>
		<nav>
		  <ul>
			<li><a href="#">Accueil</a></li>
			<li class="deroule"><a href="#">About <span class="fleche"></span></a>
			  <ul>
				<li><a href="#" onclick="alert(2)">about 1</a></li>
				<li><a href="#">about 2</a></li>
				<li><a href="#">about 3</a></li>
			  </ul>
			</li>
			<li class="deroule"><a href="#">Services <span class="fleche"></span></a>
			  <ul>
				<li><a href="#">services 1</a></li>
				<li><a href="#">services 2</a></li>
				<li><a href="#">services 3</a></li>
				<li><a href="#">services 4</a></li>
				<li><a href="#">services 5</a></li>
			  </ul>
			</li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Contact</a></li>
		  </ul>
		</nav>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente cumque tenetur recusandae. Non deserunt illo cupiditate minus quae magnam dolor doloribus ad exercitationem ipsam molestiae eius, vitae aut animi molestias?</p>
	</body>
</html>

Quand je le test avec chrome sur mon PC de bureau, le menu s'affiche correctement mais quand je clic sur About ou Service le menu ne se déroule pas.

Merci pour votre aide.

J'ai trouvé pourquoi ça ne fonctionne pas en affichant le code source de la page https://codepen.io/salsacobo/pen/zKavVd.

Il faut mettre le script après le code html du menu.

Par contre si quelqu'un peut m'expliquer pourquoi?

Code:

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
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="/css/menu.css"/>
		<title>test.php</title>
	</head>
	<body>
		<nav>
			<ul>
				<li><a href="#">Accueil</a></li>
				<li class="deroule"><a href="#">About <span class="fleche"></span></a>
					<ul>
						<li><a href="#" onclick="alert(2)">about 1</a></li>
						<li><a href="#">about 2</a></li>
						<li><a href="#">about 3</a></li>
					</ul>
				</li>
				<li class="deroule"><a href="#">Services <span class="fleche"></span></a>
					<ul>
						<li><a href="#">services 1</a></li>
						<li><a href="#">services 2</a></li>
						<li><a href="#">services 3</a></li>
						<li><a href="#">services 4</a></li>
						<li><a href="#">services 5</a></li>
					</ul>
				</li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>
 
		<p>chapitre</p>
 
		<script>
                        (function(){
                                var tabMenu = document.querySelectorAll('.deroule');
                                var tabD = document.querySelectorAll('ul ul');
 
                                function deroule(e){
                                        e.stopPropagation();
                                        obj = this.querySelector('ul');
                                        if(!this.open){
                                                tabMenu.forEach(ferme);
                                                obj.style.display = "block";
                                                this.open = true;
                                        }
                                        else{
                                                obj.style.display = "none";
                                                this.open = false;
                                        }
                                }
 
                                var ferme = function(obj, i){
                                        tabD[i].style.display = "none";
                                        obj.open = false;
                                };
 
                                var init = function(obj){
                                        obj.addEventListener("click", deroule);
                                        obj.open = false;
                                };
 
                                tabMenu.forEach(init);
 
                                window.addEventListener("click", function(){
                                        tabMenu.forEach(ferme);
                                });
 
                                window.addEventListener("scroll", function(){
                                        tabMenu.forEach(ferme);
                                });
                        })();
                </script>
	</body>
</html>

31/12/2018, 19h19
Sodium
Le script est exécuté dès le chargement du fichier JavaScript, donc potentiellement avant que le DOM soit charger, donc il s'applique sur les éléments de menu avant que ceux-ci existent dans la page.

Tu peux englober tout le code dans une fonction qui s'exécute lorsque le DOM est chargé
Code:

1 2 3 4 window.onload = function() { // ton code };
02/01/2019, 16h20
SpaceFrog

La solution de mettre le script est en bas de page, donc après instanciation des éléments du DOM est tout à fait viable.
02/01/2019, 23h20
kewan

Citation:

Envoyé par Sodium

Englober tout le code dans une fonction qui s'exécute lorsque le DOM est chargé

Citation:

Envoyé par SpaceFrog

La solution de mettre le script en bas de page est viable.

J'ai testé les deux solutions, elles fonctionnent bien.:plusser:
Merci pour votre aide.