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