Recuperation des item <li> ?

Version imprimable

22/01/2011, 13h34
denebola

Recuperation des item <li> ?

Bonjour,

Comment récupérer chaque item <li> du sous menu (du menu horizontal) et les affecter un à un dans une Table que j afficherai en vertical dans ma page?

Est ce que quelqu'un peut me donner une idée ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var menu = document.getElementById("monMenu"); 
var conteneur = document.getElementById("monConteneur"); 
var tbody = document.createElement("tbody"); 
var lis = menu.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
  var tr = document.createElement("tr");
  var td = document.createElement("td");
  td.innerHTML = lis[i].innerHTML;
  tr.appendChild(td);
  tbody.appendChild(tr); 
}
var table = document.createElement("table");
table.appendChild(tbody);
conteneur.appendChild(table);

Ou quelque chose du genre. :-)

Bonjour,

Merci pour ta réponse :)

j ai encore deux questions à propos du tableau utilisée please:

1) Comment afficher tableau à droite de la page ,
2) Comment effacer le contenue de ce tableau à chaque fois que l utilisateur clique sur un autre Sous Menu?

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html>
 
<head>
<title>Sans Titre</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="HAPedit 3.1">
 
<style type="text/css">
#monMenu ul
{
   color: #49A3FF;
}
 
 
</style>
 
<script type="text/javascript" language="javascript">
 
function test()
{
      var menu = document.getElementById("monMenu");
      var conteneur = document.getElementById("monConteneur");
      var tbody = document.createElement("tbody");
      var lis = menu.getElementsByTagName("li");
      for (var i = 0; i < lis.length; i++) {
      var tr = document.createElement("tr");
      var td = document.createElement("td");
      td.innerHTML = lis[i].innerHTML;
      tr.appendChild(td);
      tbody.appendChild(tr);
}
var table = document.createElement("table");
table.appendChild(tbody);
conteneur.appendChild(table);
 
} //fin fct
 
</script>
 
</head>
<body bgcolor="#FFFFFF">
 
<ul onclick="test();">
   <li id="monMenu">menu1
       <ul id="monConteneur">
          <li>ss-menu1</li>
          <li>ss-menu2</li>
          <li>ss-menu3</li>
       </ul>
 
   </li>
 
   <li>
       menu2
   </li>
 
 
   <li>
       menu3
   </li>
 
</ul>
 
 
 
</body>
</html>

et Merci

22/01/2011, 17h44
Willpower

Ok, je visualise mieux ce que tu veux faire mnt. Je te proposerai une solution beaucoup plus simple dans 3h. (quand j'aurai un pc sous la main.)

:-)
22/01/2011, 18h01
denebola

Oh Merci Willpower,
j ai pensé à jquery (http://api.jquery.com/nth-child-selector/) , mais pas encore arriver...
j attenterai ta réponse...
22/01/2011, 18h27
Willpower

Faut voir. Jquery fait quand meme 100ko... si ce sont les seules lignes de javascript de ton site, vaut mieux pe les coder à l'ancienne. Par contre si tu comptes encore faire d'autres manip. Javascript, alors effectivement Jquery facilite grandement ces traitements. :-)
22/01/2011, 18h58
NoSmoking

Bonjour,

Citation:

Comment récupérer chaque item <li> du sous menu (du menu horizontal) et les affecter un à un dans une Table que j afficherai en vertical dans ma page?

en natif une liste UL -> LI est en vertical, d'habitude on cherche à les mettre en horizontal

A voir pour information Menu horizontal déroulant
22/01/2011, 18h58
denebola

OK, bien noté ths;
que ca soit en Javascript ou en jquery ; mon seul souci maintenant est de réaliser le menu déroulant avec la présence d une table à droite de la page qui se remplira du block Sous menu (du menu cliqué par l utilisateur)

menu1 menu2 menu3
ssmenu11 ssmenu21 ssmenu31
ssmenu12 ssmenu22 ssmenu32

et si l utilisateur clique sur (soit menu1, soit ssmenu11, soit ssmenu12) on aura:

La Table Cible:
menu1
ssmenu11
ssmenu12

et si l utilisateur clique sur (soit menu3, soit ssmenu31, soit ssmenu32) on aura:

La Table Cible:
menu3
ssmenu31
ssmenu32
22/01/2011, 19h20
Willpower

Citation:

Envoyé par denebola

OK, bien noté ths;
que ca soit en Javascript ou en jquery ; mon seul souci maintenant est de réaliser le menu déroulant avec la présence d une table à droite de la page qui se remplira du block Sous menu (du menu cliqué par l utilisateur)

menu1 menu2 menu3
ssmenu11 ssmenu21 ssmenu31
ssmenu12 ssmenu22 ssmenu32

et si l utilisateur clique sur (soit menu1, soit ssmenu11, soit ssmenu12) on aura:

La Table Cible:
menu1
ssmenu11
ssmenu12

et si l utilisateur clique sur (soit menu3, soit ssmenu31, soit ssmenu32) on aura:

La Table Cible:
menu3
ssmenu31
ssmenu32

Quand tu dis "table", tu veux que ce soit la balise html "table" ou c'est juste façon de parler ? (je regarde ça dans une bonne heure)
22/01/2011, 19h40
NoSmoking

jettes un oeil sur Menu horizontal déroulant 1, et les autres, c'est sur ce site

pour le

Citation:

Citation:

et si l utilisateur clique sur (soit menu1, soit ssmenu11, soit ssmenu12) on aura:

Citation:

et si l utilisateur clique sur (soit menu3, soit ssmenu31, soit ssmenu32) on aura:

cela pourra ce traiter par javascript, même si le onclick sur ce type de menu est plutôt anti ergonomique à mon sens.

>>...en natif une liste UL -> LI est en vertical, d'habitude on cherche à les mettre en horizontal; OUi OUI je sais et je l ai bien trouvé :

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
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html>
 
<head>
<title>Sans Titre</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="HAPedit 3.1">
 
<script type="text/javascript" language="javascript">
//au chargement de la page, on appelle la fonction montre()
window.onload=montre;
 
//affichage du menu déroulant et placement de ce dernier
function montre(id,affiche)
{
  var d = document.getElementById(id);
  //si on quitte un élément du menu
  if (d && !affiche) 
  {
    d.style.display='none'; //on l'efface
    var c=d.parentNode; //son parent
    if (c.parentNode.parentNode.parentNode.tagName!='DIV')  //si c'est un sous-menu, on rend à son parent les couleurs d'origine
    {
      c.firstChild.style.color='#39f';
      c.firstChild.style.background='#fff';
    }
  }
  //sinon si on se mets sur un élément du menu
  else if (d && affiche)
  { 
    d.style.display='block'; //on l'affiche
    var c=d.parentNode; //son parent
    if (c.parentNode.parentNode.parentNode.tagName!='DIV') //si c'est un sous-menu, on donne à son parent les couleurs de survol
    {
      c.firstChild.style.color='#fff';
      c.firstChild.style.background='#39f';
    }
  }
}
 
</script>
 
<style type="text/css">
 
* {
margin:0px;
padding:0px;
background:#ffffff;
text-align:center;
}
 
body{
font-family:Arial, Helvetica, sans-serif;
}
 
img {
border:none;
}
 
a {  
color:#000000;
text-decoration:none;
text-transform:none;
}
 
/*centre la page et donne la largeur pour une basse résolution*/
#centrer {
margin-left:auto;
margin-right:auto;
width:776px;
}
 
/****************************/
/*   début menu  déroulant  */
/****************************/
ul, li {
list-style-type:none;
 
}
 
/*chaque sous-menu*/
#menu ul li {
position:relative;
float:right;
width:125px;
cursor:pointer;
display:block;
background:#6666ff;
height:22px;
}
 
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
display:none;
position:absolute;
width:125px;
border:1px solid #dddddd;
border-top:none;
top:22px;
left:0;
}
 
#menu ul li ul li {
height:100%;
}
 
#menu ul li ul li a {
color:#3399ff;
font-size:11px;
font-weight:normal;
display:block;
height:100%;
border-top:1px solid #dddddd;
}
 
/*au passage de la souris on inverse les couleurs de la case*/
#menu ul li ul li a:hover {
color:#ffffff;
background:#3399ff;
}
 
/*décalage des sous-menu niveau 2 vers la droite*/
#menu ul li ul li ul {
top:0px;
left:125px;
}
 
/*décalage du sous-menu niveau 2 le plus à droite vers la gauche*/
#menu ul li ul li ul.dernier {
left:-127px;
}
 
td{
font-size: 12pt;
font-family: Verdana, arial, Sans-Serif;
line-height :20pt;
width :200px;
background:#B7DBFF;
top:50px;
text-align:left;
}
 
 
</style>
 
</head>
<body bgcolor="#FFFFFF">
 
<div id="centrer">
 
 
<div id="menu">
  <ul>
    <li onmouseover="montre('smenu5',true);" onmouseout="montre('smenu5',false);">Menu 5
 
      <ul id="smenu5">
 
        <li onmouseover="montre('smenu51',true);" onmouseout="montre('smenu51',false);"><a href="#">smenu51</a>
          <ul class="dernier" id="smenu51">
            <li><a href="#">smenu511</a></li>
            <li><a href="#">smenu512</a></li>
            <li><a href="#">smenu513</a></li>
          </ul>
        </li>
        <li onmouseover="montre('smenu52',true);" onmouseout="montre('smenu52',false);"><a href="#">smenu52</a>
          <ul class="dernier" id="smenu52">
            <li><a href="#">smenu521</a></li>
            <li><a href="#">smenu522</a></li>
            <li><a href="#">smenu523</a></li>
          </ul>
        </li>
        <li onmouseover="montre('smenu53',true);" onmouseout="montre('smenu53',false);"><a href="#">smenu53</a>
          <ul class="dernier" id="smenu53">
            <li><a href="#">smenu531</a></li>
            <li><a href="#">smenu532</a></li>
            <li><a href="#">smenu533</a></li>
          </ul>
        </li>
 
      </ul>
 
    </li>
 
 
    <li onmouseover="montre('smenu4',true);" onmouseout="montre('smenu4',false);">Menu 4
      <ul id="smenu4">
        <li onmouseover="montre('smenu41',true);" onmouseout="montre('smenu41',false);"><a href="#">smenu41</a>
          <ul id="smenu41">
            <li><a href="#">smenu411</a></li>
 
            <li><a href="#">smenu412</a></li>
            <li><a href="#">smenu413</a></li>
          </ul>
        </li>
        <li onmouseover="montre('smenu42',true);" onmouseout="montre('smenu42',false);"><a href="#">smenu42</a>
          <ul id="smenu42">
            <li><a href="#">smenu421</a></li>
 
            <li><a href="#">smenu422</a></li>
            <li><a href="#">smenu423</a></li>
          </ul>
        </li>
        <li><a href="#">smenu43</a></li>
        <li><a href="#">smenu44</a></li>
      </ul>
 
    </li>  
 
 
    <li onmouseover="montre('smenu3',true);" onmouseout="montre('smenu3',false);">Menu 3
      <ul style="display: none;" id="smenu3">
        <li onmouseover="montre('smenu31',true);" onmouseout="montre('smenu31',false);"><a style="color: rgb(51, 153, 255); background: none repeat scroll 0% 0% rgb(255, 255, 255);" href="#">smenu31</a>
          <ul style="display: none;" id="smenu31">
            <li><a href="#">smenu311</a></li>
            <li><a href="#">smenu312</a></li>
            <li><a href="#">smenu313</a></li>
 
          </ul>
        </li>
        <li><a href="#">smenu32</a></li>
        <li><a href="#">smenu33</a></li>
        <li><a href="#">smenu34</a></li>
        <li onmouseover="montre('smenu35',true);" onmouseout="montre('smenu35',false);"><a style="color: rgb(51, 153, 255); background: none repeat scroll 0% 0% rgb(255, 255, 255);" href="#">smenu35</a>
          <ul style="display: none;" id="smenu35">
 
            <li><a href="#">smenu352</a></li>
            <li><a href="#">smenu353</a></li>
          </ul>
        </li>
        <li onmouseover="montre('smenu36',true);" onmouseout="montre('smenu36',false);"><a style="color: rgb(51, 153, 255); background: none repeat scroll 0% 0% rgb(255, 255, 255);" href="#">smenu36</a>
          <ul style="display: none;" id="smenu36">
            <li><a href="#">smenu361</a></li>
 
            <li><a href="#">smenu362</a></li>
            <li><a href="#">smenu363</a></li>
          </ul>
        </li>
      </ul>      
    </li>
 
 
    <li onmouseover="montre('smenu2',true);" onmouseout="montre('smenu2',false);">Menu 2
      <ul style="display: none;" id="smenu2">
        <li><a href="#">smenu21</a></li>
 
        <li><a href="#">smenu22</a></li>
        <li><a href="#">smenu23</a></li>
        <li onmouseover="montre('smenu24',true);" onmouseout="montre('smenu24',false);"><a href="#">smenu24</a>
          <ul id="smenu24">
            <li><a href="#">smenu241</a></li>
            <li><a href="#">smenu242</a></li>
 
            <li><a href="#">smenu243</a></li>
          </ul>
        </li>
      </ul>      
    </li>  
 
 
    <li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);">Menu 1
      <ul style="display: none;" id="smenu1">
        <li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a style="color: rgb(51, 153, 255); background: none repeat scroll 0% 0% rgb(255, 255, 255);" href="#">smenu11</a>
          <ul style="display: none;" id="smenu11">
 
            <li><a href="#">smenu111</a></li>
            <li><a href="#">smenu112</a></li>
          </ul>
        </li>
        <li><a href="#">smenu12</a></li>
        <li onmouseover="montre('smenu13',true);" onmouseout="montre('smenu13',false);"><a href="#">smenu13</a>
          <ul id="smenu13">
 
            <li><a href="#">smenu131</a></li>
            <li><a href="#">smenu132</a></li>
            <li><a href="#">smenu133</a></li>
          </ul>
        </li>
       </ul>
    </li>
 
 
  </ul>  
</div>  
</div>
 
<table align="right" bgcolor="#B7DBFF">
 
 <tr><td>Menu1</td><tr>
 <tr><td></td><tr>
 
 <tr><td>&nbsp;&nbsp;smenu11</td><tr>
 <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;smenu111</td><tr>
 <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;smenu112</td><tr>
 
 <tr><td>&nbsp;&nbsp;smenu12</td><tr>
 <tr><td>&nbsp;&nbsp;smenu13</td><tr>
 
 <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;smenu131</td><tr>
 <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;smenu132</td><tr>
 <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;smenu133</td><tr>
 
</table>
 
 
</body>
</html>

sauf que ma tache est : d ajouter une table vertical qui montrera (chaque fois) à l utilisateur le block du sous menu (du menu cliqué )
c est pour cette raison que je devais connaitre comment récupérer les item <li> pour voir comment les affecter à une table succesivement et en respectant l enchainement des <ul> <li> ....

NB:
Dans le code que j ai mis, la table vertical en bleu clair est écrite manuellement (juste pour expliquer ma tache)et nom pas programmée, je dois la rendre dynamique...:cry:
le contenu qu elle contient actuellement doit être remplit par le fait que l utilisateur clique sur soit menu1 soit un des sous menu descendant du menu1)

et que cette table s effacera et se remplira par chaque block des sous menu si l utilisateur part ou clique sur un autre menu...

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
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html>
 
<head>
<title>Sans Titre</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="HAPedit 3.1">
 
<script type="text/javascript" language="javascript">
//au chargement de la page, on appelle la fonction montre()
var table,level=0;
window.onload = function(){
        table = document.getElementById("table_menu");
        table = table.tBodies[0];
        montre();
};
function montre(id,affiche){
        // conserve l'effet de parcours
        montreOriginal(id,affiche);
        
        var obj = document.getElementById(id);
        
        // efface table
        if ( table.hasChildNodes() )
                while ( table.childNodes.length >= 1 )
                        table.removeChild( table.firstChild ); 
        // affiche table   
        if (obj && affiche) {
                // affiche le titre, exemple : SMENU1
                var tr = document.createElement("TR");
                var td = document.createElement("TD");
                td.innerHTML = id;
                tr.appendChild(td);
                table.appendChild(tr);
                // parcours et affiche le reste des sous-menu
                parcours(obj);
        }
}
function parcours(domObjet){
        level++;
        var space = ""
        for(var i=0;i<level;i++)
                space += "&nbsp;";
        if(domObjet.nodeName == "LI");
                if(domObjet.firstChild.nodeName == "A"){
                        var tr = document.createElement("TR");
                        var td = document.createElement("TD");
                        
                        var child = domObjet.firstChild.cloneNode(true);
                        child.innerHTML = space+child.firstChild.nodeValue;
                        
                        td.appendChild(child);
                        tr.appendChild(td);
                        table.appendChild(tr);
                }
        for(var i=0;i<domObjet.childNodes.length;i++)
                if(domObjet.childNodes[i].nodeName == "UL" || domObjet.childNodes[i].nodeName == "LI")
                        parcours(domObjet.childNodes[i]);
        level--;
} 
 
//affichage du menu déroulant et placement de ce dernier
function montreOriginal(id,affiche)
{
  var d = document.getElementById(id);
  //si on quitte un élément du menu
  if (d && !affiche) 
  {
    d.style.display='none'; //on l'efface
    var c=d.parentNode; //son parent
    if (c.parentNode.parentNode.parentNode.tagName!='DIV')  //si c'est un sous-menu, on rend à son parent les couleurs d'origine
    {
      c.firstChild.style.color='#39f';
      c.firstChild.style.background='#fff';
    }
  }
  //sinon si on se mets sur un élément du menu
  else if (d && affiche)
  { 
    d.style.display='block'; //on l'affiche
    var c=d.parentNode; //son parent
    if (c.parentNode.parentNode.parentNode.tagName!='DIV') //si c'est un sous-menu, on donne à son parent les couleurs de survol
    {
      c.firstChild.style.color='#fff';
      c.firstChild.style.background='#39f';
    }
  }
}
 
</script>
 
<style type="text/css">
 
* {
margin:0px;
padding:0px;
background:#ffffff;
text-align:center;
}
 
body{
font-family:Arial, Helvetica, sans-serif;
}
 
img {
border:none;
}
 
a {  
color:#000000;
text-decoration:none;
text-transform:none;
}
 
/*centre la page et donne la largeur pour une basse résolution*/
#centrer {
margin-left:auto;
margin-right:auto;
width:776px;
}
 
/****************************/
/*   début menu  déroulant  */
/****************************/
ul, li {
list-style-type:none;
 
}
 
/*chaque sous-menu*/
#menu ul li {
position:relative;
float:right;
width:125px;
cursor:pointer;
display:block;
background:#6666ff;
height:22px;
}
 
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
display:none;
position:absolute;
width:125px;
border:1px solid #dddddd;
border-top:none;
top:22px;
left:0;
}
 
#menu ul li ul li {
height:100%;
}
 
#menu ul li ul li a {
color:#3399ff;
font-size:11px;
font-weight:normal;
display:block;
height:100%;
border-top:1px solid #dddddd;
}
 
/*au passage de la souris on inverse les couleurs de la case*/
#menu ul li ul li a:hover {
color:#ffffff;
background:#3399ff;
}
 
/*décalage des sous-menu niveau 2 vers la droite*/
#menu ul li ul li ul {
top:0px;
left:125px;
}
 
/*décalage du sous-menu niveau 2 le plus à droite vers la gauche*/
#menu ul li ul li ul.dernier {
left:-127px;
}
 
td{
font-size: 12pt;
font-family: Verdana, arial, Sans-Serif;
line-height :20pt;
width :200px;
background:#B7DBFF;
top:50px;
text-align:left;
}
 
 
</style>
 
</head>
<body bgcolor="#FFFFFF">
 
<div id="centrer">
 
 
<div id="menu">
  <ul>
    <li onmouseover="montre('smenu5',true);" onmouseout="montre('smenu5',false);">Menu 5
 
      <ul id="smenu5">
 
        <li onmouseover="montre('smenu51',true);" onmouseout="montre('smenu51',false);"><a href="#">smenu51</a>
          <ul class="dernier" id="smenu51">
            <li><a href="#">smenu511</a></li>
            <li><a href="#">smenu512</a></li>
            <li><a href="#">smenu513</a></li>
          </ul>
        </li>
        <li onmouseover="montre('smenu52',true);" onmouseout="montre('smenu52',false);"><a href="#">smenu52</a>
          <ul class="dernier" id="smenu52">
            <li><a href="#">smenu521</a></li>
            <li><a href="#">smenu522</a></li>
            <li><a href="#">smenu523</a></li>
          </ul>
        </li>
        <li onmouseover="montre('smenu53',true);" onmouseout="montre('smenu53',false);"><a href="#">smenu53</a>
          <ul class="dernier" id="smenu53">
            <li><a href="#">smenu531</a></li>
            <li><a href="#">smenu532</a></li>
            <li><a href="#">smenu533</a></li>
          </ul>
        </li>
 
      </ul>
 
    </li>
 
 
    <li onmouseover="montre('smenu4',true);" onmouseout="montre('smenu4',false);">Menu 4
      <ul id="smenu4">
        <li onmouseover="montre('smenu41',true);" onmouseout="montre('smenu41',false);"><a href="#">smenu41</a>
          <ul id="smenu41">
            <li><a href="#">smenu411</a></li>
 
            <li><a href="#">smenu412</a></li>
            <li><a href="#">smenu413</a></li>
          </ul>
        </li>
        <li onmouseover="montre('smenu42',true);" onmouseout="montre('smenu42',false);"><a href="#">smenu42</a>
          <ul id="smenu42">
            <li><a href="#">smenu421</a></li>
 
            <li><a href="#">smenu422</a></li>
            <li><a href="#">smenu423</a></li>
          </ul>
        </li>
        <li><a href="#">smenu43</a></li>
        <li><a href="#">smenu44</a></li>
      </ul>
 
    </li>  
 
 
    <li onmouseover="montre('smenu3',true);" onmouseout="montre('smenu3',false);">Menu 3
      <ul style="display: none;" id="smenu3">
        <li onmouseover="montre('smenu31',true);" onmouseout="montre('smenu31',false);"><a style="color: rgb(51, 153, 255); background: none repeat scroll 0% 0% rgb(255, 255, 255);" href="#">smenu31</a>
          <ul style="display: none;" id="smenu31">
            <li><a href="#">smenu311</a></li>
            <li><a href="#">smenu312</a></li>
            <li><a href="#">smenu313</a></li>
 
          </ul>
        </li>
        <li><a href="#">smenu32</a></li>
        <li><a href="#">smenu33</a></li>
        <li><a href="#">smenu34</a></li>
        <li onmouseover="montre('smenu35',true);" onmouseout="montre('smenu35',false);"><a style="color: rgb(51, 153, 255); background: none repeat scroll 0% 0% rgb(255, 255, 255);" href="#">smenu35</a>
          <ul style="display: none;" id="smenu35">
 
            <li><a href="#">smenu352</a></li>
            <li><a href="#">smenu353</a></li>
          </ul>
        </li>
        <li onmouseover="montre('smenu36',true);" onmouseout="montre('smenu36',false);"><a style="color: rgb(51, 153, 255); background: none repeat scroll 0% 0% rgb(255, 255, 255);" href="#">smenu36</a>
          <ul style="display: none;" id="smenu36">
            <li><a href="#">smenu361</a></li>
 
            <li><a href="#">smenu362</a></li>
            <li><a href="#">smenu363</a></li>
          </ul>
        </li>
      </ul>      
    </li>
 
 
    <li onmouseover="montre('smenu2',true);" onmouseout="montre('smenu2',false);">Menu 2
      <ul style="display: none;" id="smenu2">
        <li><a href="#">smenu21</a></li>
 
        <li><a href="#">smenu22</a></li>
        <li><a href="#">smenu23</a></li>
        <li onmouseover="montre('smenu24',true);" onmouseout="montre('smenu24',false);"><a href="#">smenu24</a>
          <ul id="smenu24">
            <li><a href="#">smenu241</a></li>
            <li><a href="#">smenu242</a></li>
 
            <li><a href="#">smenu243</a></li>
          </ul>
        </li>
      </ul>      
    </li>  
 
 
    <li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);">Menu 1
      <ul style="display: none;" id="smenu1">
        <li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a style="color: rgb(51, 153, 255); background: none repeat scroll 0% 0% rgb(255, 255, 255);" href="#">smenu11</a>
          <ul style="display: none;" id="smenu11">
 
            <li><a href="#">smenu111</a></li>
            <li><a href="#">smenu112</a></li>
          </ul>
        </li>
        <li><a href="#">smenu12</a></li>
        <li onmouseover="montre('smenu13',true);" onmouseout="montre('smenu13',false);"><a href="#">smenu13</a>
          <ul id="smenu13">
 
            <li><a href="#">smenu131</a></li>
            <li><a href="#">smenu132</a></li>
            <li><a href="#">smenu133</a></li>
          </ul>
        </li>
       </ul>
    </li>
 
 
  </ul>  
</div>  
</div>
 
<table id="table_menu" align="right" bgcolor="#B7DBFF">
 
 <tr><td>Menu1</td><tr>
 <tr><td></td><tr>
 
 <tr><td>&nbsp;&nbsp;smenu11</td><tr>
 <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;smenu111</td><tr>
 <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;smenu112</td><tr>
 
 <tr><td>&nbsp;&nbsp;smenu12</td><tr>
 <tr><td>&nbsp;&nbsp;smenu13</td><tr>
 
 <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;smenu131</td><tr>
 <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;smenu132</td><tr>
 <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;smenu133</td><tr>
 
</table>
</body>
</html>

c'est p-ê un peu brouillon, à parfaire.
enfin, t'as déjà une base pour travailler.

nb: je n'ai pas touché au HTML, uniquement modifié le javascript.

22/01/2011, 22h48
denebola

Super ca marche MERCI

Youpiiiiii, ca marche (oui c est ce que je devais réalisé) tu as parfaitement compris ma tache ,

Grand Merci Willpower :P

Maintenant je dois adapter cette solution pour mon site ...

1) Estce que je peux rendre ce tableau tjs. présent dans la page (fixe) et qui contiendra (par exemple) deux liens (quick Link et Contact us) qui disparaitra ou changera par le parcours de menu

2) Est ce qu on pourra réaliser cette fonction du (remplissage tableau) par le clique de la sourie

3) pour le style: j aimerai bien que mon tableau s affichera à ma droite juste au dessous du Menu Horizontal

Encore Merci pour le code WillPower :ccool:

Bonjour,

Pour la fonction Parcours , j ai pas bien compris la partie :
Code:

1 2 3 4 for(var i=0;i<domObjet.childNodes.length;i++) if(domObjet.childNodes[i].nodeName == "UL" || domObjet.childNodes[i].nodeName == "LI") parcours(domObjet.childNodes[i]); level--;
Vu que c est une fonction récursive que son but est d afficher le reste du sous menu, mais je n ai pas bien saisi son fonctionnement(c est quoi le domObject qu on lui transmet? et pourquoi on met level --?)

Aussi :
Dans la partie:
Code:

1 2 3 if ( table.hasChildNodes() ) while ( table.childNodes.length >= 1 ) table.removeChild( table.firstChild );
Est ce que ceci rend illisible la table? (car je ne trouve pas A QUEL niveau on rend la table invisible en parcourant le menu) ? au but de fixer la table...

>>...Quand tu dis "table", tu veux que ce soit la balise html "table" OUI EXACT

Citation:
Envoyé par denebola
Bonjour,

Pour la fonction Parcours , j ai pas bien compris la partie :
Code:

1 2 3 4 for(var i=0;i<domObjet.childNodes.length;i++) if(domObjet.childNodes[i].nodeName == "UL" || domObjet.childNodes[i].nodeName == "LI") parcours(domObjet.childNodes[i]); level--;
Vu que c est une fonction récursive que son but est d afficher le reste du sous menu, mais je n ai pas bien saisi son fonctionnement(c est quoi le domObject qu on lui transmet? et pourquoi on met level --?)

Aussi :
Dans la partie:
Code:

1 2 3 if ( table.hasChildNodes() ) while ( table.childNodes.length >= 1 ) table.removeChild( table.firstChild );
Est ce que ceci rend illisible la table? (car je ne trouve pas A QUEL niveau on rend la table invisible en parcourant le menu) ? au but de fixer la table...

>>...Quand tu dis "table", tu veux que ce soit la balise html "table" OUI EXACT
Les premier bout de code est une simple boucle qui parcour tous les éléments du noeud. Et s'il contient un sous-noeud "ul" ou "li", on le parcours à son tour.
Le level-- est en dehors (après) cette boucle et avec son opposé level++ en début de la fonction, permet de connaître le niveau de profondeur des appels récursives. (Ça permet dans ce cas de calculer l'indentation... parce que je ne suis pas très doué sur la gestion des string.) DomObjet, c'est simplement le nom que j'ai donné au paramètre. Tu peux l'appeler autrement si ça te pertube. :-)

Le second bout de code supprime simplement toutes les lignes de ta table.

Style table vertical?

Bonjour,

Merci pour les explications, plus clair maintenant;
En fait pour le level--, je l avais pas compris parceque tu déclare au début level à zero , puis première itération level++ (cvd level==1) ; et en fin de boucle for on met level-- (donc elle redeviens zero) c était dans ma pt. Trace de test (mais bon, peut être j ai fait une erreur dans cette trace)

>>...Le level-- est en dehors (après) cette boucle et avec son opposé level++ en début de la fonction, permet de connaître le niveau de profondeur des appels récursives.
Mais j ai compris son rôle par l explication que tu ma donne , Merci :P

Pour le truc du click, j ai un peu changer le code :

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
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
 
 
<head>
<title>Sans Titre</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 
<script type="text/javascript" language="javascript">
 
//au chargement de la page, on appelle la fonction montre()
 
var table,level=0;
 
//-----------------------------------------Onload
 
window.onload = function()
{
     table = document.getElementById("table_menu");
     //table = table.tBodies[0];
     //montre();
};
//-----------------------------------------Montre() new
function montre(id,affiche)
{
 
    // conserve l'effet de parcours:
 
    montreOriginal(id,affiche);  //a ce niveau en rend le table invisible ???
 
 
    /*  
    var obj = document.getElementById(id);
    
    // efface table:
    if ( table.hasChildNodes() )
    while ( table.childNodes.length >= 1 )
          table.removeChild( table.firstChild ); 
  
  
    // affiche table:   
    if (obj && affiche) 
    {
           // affiche le titre, exemple : SMENU1
           var tr = document.createElement("TR");
           var td = document.createElement("TD");
           td.innerHTML = id;
           tr.appendChild(td);
           table.appendChild(tr);
    
           // parcours et affiche le reste des sous-menu
           parcours(obj);
     }
     */
 
}
 
//--------------------------- fct du click:
function affiche(id)
{
 
   var obj = document.getElementById(id);
 
    // efface table:
    if ( table.hasChildNodes() )
    while ( table.childNodes.length >= 1 )
          table.removeChild( table.firstChild ); 
 
 
    // affiche table:   
    if (obj && affiche) 
    {
           // affiche le titre, exemple : SMENU1
           var tr = document.createElement("TR");
           var td = document.createElement("TD");
           td.innerHTML = id;
           tr.appendChild(td);
           table.appendChild(tr);
 
           // parcours et affiche le reste des sous-menu
           parcours(obj);
     }
 
}
 
 
//---------------------------------------Parcours()
 
function parcours(domObjet)
{
 
      level++;
      var space = ""
      for(var i=0; i<level; i++)
          space += "&nbsp;";
 
      if(domObjet.nodeName == "LI");
 
      if(domObjet.firstChild.nodeName == "A")
      {
           var tr = document.createElement("TR");
           var td = document.createElement("TD");
 
           var child = domObjet.firstChild.cloneNode(true);
           child.innerHTML = space+child.firstChild.nodeValue;
 
           td.appendChild(child);
           tr.appendChild(td);
           table.appendChild(tr);
    }
 
    for(var i=0;i<domObjet.childNodes.length;i++)
        if(domObjet.childNodes[i].nodeName == "UL" || domObjet.childNodes[i].nodeName == "LI")
            parcours(domObjet.childNodes[i]);
            level--;
} 
 
//-------------------------------------------------------------MontreOriginal: 
 
//affichage du menu déroulant et placement de ce dernier
 
function montreOriginal(id,affiche)
{
     var d = document.getElementById(id);
 
     //si on quitte un élément du menu
     if (d && !affiche) 
     {
        d.style.display='none'; //on l'efface
        var c = d.parentNode; //son parent
 
            //si c'est un sous-menu, on rend à son parent les couleurs d'origine
         if (c.parentNode.parentNode.parentNode.tagName!='DIV')  
         {
             c.firstChild.style.color='#39f';
             c.firstChild.style.background='#fff';
         }
     }
 
     //sinon si on se mets sur un élément du menu
     else if (d && affiche)
     { 
          d.style.display='block'; //on l'affiche
          var c=d.parentNode; //son parent
 
             //si c'est un sous-menu, on donne à son parent les couleurs de survol
         if (c.parentNode.parentNode.parentNode.tagName!='DIV') 
         {
               c.firstChild.style.color='#fff';
               c.firstChild.style.background='#39f';
         }
     }
}
 
</script>
 
<style type="text/css">
 
* {
margin:0px;
padding:0px;
background:#ffffff;
text-align:center;
}
 
body{
font-family:Arial, Helvetica, sans-serif;
}
 
img {
border:none;
}
 
a {  
color:#000000;
text-decoration:none;
text-transform:none;
}
 
/*centre la page et donne la largeur pour une basse résolution*/
#centrer {
margin-left:auto;
margin-right:auto;
width:776px;
}
 
/****************************/
/*   début menu  déroulant  */
/****************************/
ul, li {
list-style-type:none;
 
}
 
/*chaque sous-menu*/
#menu ul li {
position:relative;
float:right;
width:125px;
cursor:pointer;
display:block;
background:#6666ff;
height:22px;
}
 
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
display:none;
position:absolute;
width:125px;
border:1px solid #dddddd;
border-top:none;
top:22px;
left:0;
}
 
#menu ul li ul li {
height:100%;
}
 
#menu ul li ul li a {
color:#3399ff;
font-size:11px;
font-weight:normal;
display:block;
height:100%;
border-top:1px solid #dddddd;
}
 
/*au passage de la souris on inverse les couleurs de la case*/
#menu ul li ul li a:hover {
color:#ffffff;
background:#3399ff;
}
 
/*décalage des sous-menu niveau 2 vers la droite*/
#menu ul li ul li ul {
top:0px;
left:125px;
}
 
/*décalage du sous-menu niveau 2 le plus à droite vers la gauche*/
#menu ul li ul li ul.dernier {
left:-127px;
}
 
td{
font-size: 12pt;
font-family: Verdana, arial, Sans-Serif;
line-height :20pt;
width :200px;
background:#B7DBFF;
top:50px;
text-align:left;
}
 
 
 
 
</style>
 
</head>
<body>
 
<div id="centrer">
 
 
<div id="menu">
  <ul>
    <li onmouseover="montre('smenu5',true);" onmouseout="montre('smenu5',false);" onclick="affiche('smenu5');">Menu 5
 
      <ul id="smenu5">
 
        <li onmouseover="montre('smenu51',true);" onmouseout="montre('smenu51',false);"><a href="#">smenu51</a>
          <ul class="dernier" id="smenu51">
            <li><a href="#">smenu511</a></li>
            <li><a href="#">smenu512</a></li>
            <li><a href="#">smenu513</a></li>
          </ul>
        </li>
        <li onmouseover="montre('smenu52',true);" onmouseout="montre('smenu52',false);"><a href="#">smenu52</a>
          <ul class="dernier" id="smenu52">
            <li><a href="#">smenu521</a></li>
            <li><a href="#">smenu522</a></li>
            <li><a href="#">smenu523</a></li>
          </ul>
        </li>
        <li onmouseover="montre('smenu53',true);" onmouseout="montre('smenu53',false);"><a href="#">smenu53</a>
          <ul class="dernier" id="smenu53">
            <li><a href="#">smenu531</a></li>
            <li><a href="#">smenu532</a></li>
            <li><a href="#">smenu533</a></li>
          </ul>
        </li>
 
      </ul>
 
    </li>
 
 
    <li onmouseover="montre('smenu4',true);" onmouseout="montre('smenu4',false);" onclick="affiche('smenu4');">Menu 4
      <ul id="smenu4">
        <li onmouseover="montre('smenu41',true);" onmouseout="montre('smenu41',false);"><a href="#">smenu41</a>
          <ul id="smenu41">
            <li><a href="#">smenu411</a></li>
 
            <li><a href="#">smenu412</a></li>
            <li><a href="#">smenu413</a></li>
          </ul>
        </li>
        <li onmouseover="montre('smenu42',true);" onmouseout="montre('smenu42',false);"><a href="#">smenu42</a>
          <ul id="smenu42">
            <li><a href="#">smenu421</a></li>
 
            <li><a href="#">smenu422</a></li>
            <li><a href="#">smenu423</a></li>
          </ul>
        </li>
        <li><a href="#">smenu43</a></li>
        <li><a href="#">smenu44</a></li>
      </ul>
 
    </li>  
 
 
    <li onmouseover="montre('smenu3',true);" onmouseout="montre('smenu3',false);" onclick="affiche('smenu3');">Menu 3
      <ul style="display: none;" id="smenu3">
        <li onmouseover="montre('smenu31',true);" onmouseout="montre('smenu31',false);"><a style="color: rgb(51, 153, 255); background: none repeat scroll 0% 0% rgb(255, 255, 255);" href="#">smenu31</a>
          <ul style="display: none;" id="smenu31">
            <li><a href="#">smenu311</a></li>
            <li><a href="#">smenu312</a></li>
            <li><a href="#">smenu313</a></li>
 
          </ul>
        </li>
        <li><a href="#">smenu32</a></li>
        <li><a href="#">smenu33</a></li>
        <li><a href="#">smenu34</a></li>
        <li onmouseover="montre('smenu35',true);" onmouseout="montre('smenu35',false);"><a style="color: rgb(51, 153, 255); background: none repeat scroll 0% 0% rgb(255, 255, 255);" href="#">smenu35</a>
          <ul style="display: none;" id="smenu35">
 
            <li><a href="#">smenu352</a></li>
            <li><a href="#">smenu353</a></li>
          </ul>
        </li>
        <li onmouseover="montre('smenu36',true);" onmouseout="montre('smenu36',false);"><a style="color: rgb(51, 153, 255); background: none repeat scroll 0% 0% rgb(255, 255, 255);" href="#">smenu36</a>
          <ul style="display: none;" id="smenu36">
            <li><a href="#">smenu361</a></li>
 
            <li><a href="#">smenu362</a></li>
            <li><a href="#">smenu363</a></li>
          </ul>
        </li>
      </ul>      
    </li>
 
 
    <li onmouseover="montre('smenu2',true);" onmouseout="montre('smenu2',false);" onclick="affiche('smenu2');">Menu 2
      <ul style="display: none;" id="smenu2">
        <li><a href="#">smenu21</a></li>
 
        <li><a href="#">smenu22</a></li>
        <li><a href="#">smenu23</a></li>
        <li onmouseover="montre('smenu24',true);" onmouseout="montre('smenu24',false);"><a href="#">smenu24</a>
          <ul id="smenu24">
            <li><a href="#">smenu241</a></li>
            <li><a href="#">smenu242</a></li>
 
            <li><a href="#">smenu243</a></li>
          </ul>
        </li>
      </ul>      
    </li>  
 
 
    <li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);" onclick="affiche('smenu1');">Menu 1
      <ul style="display: none;" id="smenu1">
        <li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a style="color: rgb(51, 153, 255); background: none repeat scroll 0% 0% rgb(255, 255, 255);" href="#">smenu11</a>
          <ul style="display: none;" id="smenu11">
 
            <li><a href="#">smenu111</a></li>
            <li><a href="#">smenu112</a></li>
          </ul>
        </li>
        <li><a href="#">smenu12</a></li>
        <li onmouseover="montre('smenu13',true);" onmouseout="montre('smenu13',false);"><a href="#">smenu13</a>
          <ul id="smenu13">
 
            <li><a href="#">smenu131</a></li>
            <li><a href="#">smenu132</a></li>
            <li><a href="#">smenu133</a></li>
          </ul>
        </li>
       </ul>
    </li>
 
 
  </ul>  
</div>  
</div>
 
<table id="table_menu" align="right">
 
 <tr><td>Quick Link</td></tr>
 <tr><td>Contact Us</td></tr>
 <tr><td>About Us</td></tr>
 
 
</table>
</body>
</html>

Le souci qui me reste est bien de Rendre plus joli la table utilisée ?
Au niveau du style , je ne sais comment enlever le blanc qui entoure chaque sous menu (écrit dans le tableau)?
Aussi, je ne sais pas pourquoi il ne veut pas s afficher à droite au dessous du menu horizontal (avec un espace de 3 ou 4 cm par exemple)
Peux tu m aider dans le style STP ?