Menu déroulant en mode tactile

**kewan** · 30/12/2018, 21h15

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 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
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.

**kewan** · 31/12/2018, 14h50

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 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
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>

**Sodium** · 31/12/2018, 19h19

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 :

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

1
2
3
4
 
window.onload = function() {
    // ton code
};

**SpaceFrog** · 02/01/2019, 16h20

La solution de mettre le script est en bas de page, donc après instanciation des éléments du DOM est tout à fait viable.

**kewan** · 02/01/2019, 23h20

Envoyé par Sodium

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

Envoyé par SpaceFrog

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

J'ai testé les deux solutions, elles fonctionnent bien.

Merci pour votre aide.

Menu déroulant en mode tactile

JavaScript

Discussions similaires

Partager

Partager