Bonjour

Je suis actuellement en train de réaliser un menu qui se déroule progressivement pour un future site. J'ai réussi à réaliser un petit programme test qui redimensionne un bloc div tous les X temps avec un timer.

Mon problème est que le contenu qui est sous forme de balise UL et LI ne se dévoile pas progressivement.

Le comportement souhaité est :

-je clique sur le lien
-le bloc div grandi progressivement jusqu'à atteindre sa taille max
-le contenu de bloc div (UL et LI) apparait progressivement en meme temps que la balise div.


Vous pouvez voir le script en exécution ICI

je sais que le programme suivant est très loin d'être correcte mais viens de juste de commencer a apprendre la progra.

merci pour votre aide

bonne journée

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
 
<body>
 
<a href="#" title="cliquez ici" onclick="derou()">Cliquez ici</a>
<script language="javascript">
 
//document.onclick=derou;
 
function time(){
 
 
	setTimeout("derou()",100);
}
 
//var div=document.getElementById("dd");
var taille=2;
//div.style.display="block";
 
function derou(){
 
		if (taille<400){
 
			var div=document.getElementById("dd");
			div.style.display="block";
			div.style.height=taille+"px";
			taille+=2;
			setTimeout("derou()",20);
		}
}
 
</script>
 
<div id="dd" style="height:100px; display:none;">
  <ul>
  	<li>gdfgdfgdfgdfgfdg</li>
    <li>fdsfsdg</li>
    <li>gdfgdfgdfgdfgfdg</li>
    <li>fdsfsdg</li>
    <li>gdfgdfgdfgdfgfdg</li>
    <li>fdsfsdg</li>
    <li>gdfgdfgdfgdfgfdg</li>
    <li>fdsfsdg</li>
    <li>gdfgdfgdfgdfgfdg</li>
    <li>fdsfsdg</li>
    <li>gdfgdfgdfgdfgfdg</li>
    <li>fdsfsdg</li>
    <li>gdfgdfgdfgdfgfdg</li>
    <li>fdsfsdg</li>
    <li>gdfgdfgdfgdfgfdg</li>
    <li>fdsfsdg</li>
    <li>gdfgdfgdfgdfgfdg</li>
    <li>fdsfsdg</li>
  </ul>
</div>
 
<div>
sdfjsfjshfskjhfkjsdfhkjdshfskjdhfkdsjf
</div>
 
</body>