Contenu d'un menu déroulant

**nuphius** · 11/02/2009, 15h41

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>

**Bovino** · 11/02/2009, 16h40

Code :

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

<div id="dd" style="height:100px; display:none; overflow: hidden">

**nuphius** · 11/02/2009, 16h47

merci beaucoup !

histoire d'en savoir plus, qu'elle est la fonction exacte de overflow: hidden ?

merci

**Bovino** · 11/02/2009, 16h50

C'est une propriété CSS qui permet de masquer le contenu qui dépasse de l'élément auquel il fait référence.

**nuphius** · 11/02/2009, 16h54

Merci beaucoup il me reste plus cas peaufiner mon programme

Contenu d'un menu déroulant

JavaScript

Discussions similaires

Partager

Partager