Bonjour,
J'essaye depuis un moment de me faire mon propre menu vertical dynamique,
j'ai malheureusement quelque souci avec .. et bien je ne sais pas quoi,
Je vous laisse le soin de le tester, je ne comprend pas pour quoi il ne fonctionne pas ou bout d'un certain nombre de clique sur les différent groupes...
Possibilité de le voir a cette adresse : http://mimaro.free.fr/menu.html
Code : 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Menu vertical 01</title> <script type="text/javascript"> var interval = new Array; var tab = new Array; var H_def = 17; function deploy(obj){ obj = document.getElementById(obj.parentNode.id); //ul = document.getElementsByTagName("ul")[0].id; ul = obj.id.replace('groupe','menu'); // reduit les autre groupes for (i in tab) { if (i != obj.id && (document.getElementById(i).offsetHeight-1)>= H_def) { clearInterval(interval[i]); tab[i] = false; ul_ = i.replace('groupe','menu'); interval[i] = setInterval(function() {grow(document.getElementById(i),ul_)},1); document.getElementById('test').innerHTML = i; } } if (tab[obj.id] == true) {tab[obj.id]=false;}else{tab[obj.id]=true;} interval[obj.id] = setInterval(function() {grow(obj,ul)},1); } function grow(obj,ul){ if (obj.offsetHeight <= document.getElementById(ul).offsetHeight&&tab[obj.id] == true) {obj.style.height = (obj.offsetHeight+1)+"px"; } else if ((obj.offsetHeight-1) >= H_def && tab[obj.id] == false) {obj.style.height = (obj.offsetHeight-1)+"px"; } else {clearInterval(interval[obj.id]);} } </script> <style type="text/css"> <!-- body,td,th { font-size: 12px; font-family: Calibri; cursor:default; } p { margin:0px; } ul ,li { margin:0px; padding:0px; } li { padding-left:15px; } .groupe { overflow:hidden; height:17px; width:150px; } .titre { font-weight:bold; text-align:center; cursor:pointer; font-size:14px; background-color:#6699CC; } --> </style></head> <div id="test">test</div> <div id="groupe1" class="groupe"> <p class="titre" onclick="deploy(this)">Groupe 1</p> <ul id="menu1"> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> <li>Menu5</li> <li>Menu6</li> <li>Menu7</li> <li>Menu8</li> </ul> </div> <div id="groupe2" class="groupe"> <p class="titre" onclick="deploy(this)">Groupe 2</p> <ul id="menu2"> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> <li>Menu5</li> <li>Menu6</li> <li>Menu7</li> <li>Menu8</li> </ul> </div> <div id="groupe3" class="groupe"> <p class="titre" onclick="deploy(this)">Groupe 3</p> <ul id="menu3"> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> <li>Menu5</li> <li>Menu6</li> <li>Menu7</li> <li>Menu8</li> </ul> </div> <body> </body> </html>
Merci.
Partager