Effet avec Javascript

Bonjour à toutes et à tous.

J'ai récemment trouvé sur internet un menu déroulant fait en Javascript.

Ce qui m'as beaucoup attiré c'est le fait que les sous-menus puissent s'ouvrir petit à petit. Celui que j'ai créé ne s'ouvre pas du tout comme ca... il s'ouvre d'un coup ^^

Alors j'aurais voulu savoir si quelqu'un connait un tuto ou un moyen de pouvoir ralentir le déroulement de mon menu.

PS: Sur mon site, le menu n'est pas que en JS voir ici

Merci d'avance.

c'est a dire , il s'ouvre lentement ?
il se déroule ?

un exemple que j'avais fait tu peux t'en inspirer , ce n'est pas sur un menu mais le principe est le même :)

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
 
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script type="text/javascript">
 
 
function scrollObject(MyObject){
	//affectation d'un id dynamique
	this.Id = "monObjetBase_"+MyObject.id;
	//récupération de l'objet
	this.ObjectToAnim = MyObject;
	//récupération de la taille de l'objet
	this.Width = MyObject.offsetWidth;
	//récupération de la hauteur de l'objet
	this.Height = MyObject.offsetHeight;
	this.MonTimer = null;
	this.MonTimer2 = null;
	this.MonTimer3 = null;
	this.MonTimer4 = null;
 
	this.bendLeft = function(){
		if(this.MonTimer != null){
			clearTimeout(this.MonTimer2);
		}		
		if(parseInt(this.ObjectToAnim.offsetWidth) > 10){
			this.ObjectToAnim.style.width = (parseInt(this.ObjectToAnim.offsetWidth)  - 15)+"px";
			var obj = this;
			this.MonTimer = setTimeout(function() {obj.bendLeft()},10);					
		}
		else{
			clearTimeout(this.MonTimer);
			this.ObjectToAnim.style.width = 0 + "px";
			//this.ObjectToAnim.style.visibility = "hidden";
		}
	}
 
	this.bendRight = function(){
		if(this.MonTimer != null){
			clearTimeout(this.MonTimer);
		}
		this.ObjectToAnim.style.visibility = (this.ObjectToAnim.style.visibility != "visible") ? "visible":"";	
 
		if(parseInt(this.ObjectToAnim.style.width) < this.Width){
			this.ObjectToAnim.style.width = (parseInt(this.ObjectToAnim.offsetWidth)  + 15)+"px";
			var obj = this;
			this.MonTimer2 = setTimeout(function() {obj.bendRight()},10);					
		}
		else{
			clearTimeout(this.MonTimer2);
			this.ObjectToAnim.style.width = this.Width + "px";
		}
	}
 
	this.bendUp = function(){
		if(this.MonTimer != null){
			clearTimeout(this.MonTimer2);
		}
		if(parseInt(this.ObjectToAnim.offsetHeight) > 10){
			this.ObjectToAnim.style.height = (parseInt(this.ObjectToAnim.offsetHeight)  - 15)+"px";
			var obj = this;
			this.MonTimer = setTimeout(function() {obj.bendUp()},10);
		}
		else{
			clearTimeout(this.MonTimer);
			this.ObjectToAnim.style.height = 0 + "px";
			//this.ObjectToAnim.style.visibility = "hidden";
		}
	}
 
	this.bendDown = function(){
		if(this.MonTimer != null){
			clearTimeout(this.MonTimer);
		}
		this.ObjectToAnim.style.visibility = (this.ObjectToAnim.style.visibility != "visible") ? "visible":"";
 
		if(parseInt(this.ObjectToAnim.style.height) < this.Height){
			this.ObjectToAnim.style.height = (parseInt(this.ObjectToAnim.offsetHeight)  + 15)+"px";
			var obj = this;
			this.MonTimer2 = setTimeout(function() {obj.bendDown()},10);
		}
		else{
			clearTimeout(this.MonTimer2);
			this.ObjectToAnim.style.height = this.Height + "px";
		}
	}
 
 
}
 
//Variable globale contenant les divs expansible
var mesElements = new CreateCollection("ListeElements");
 
function testBend(Objet,Direction){
	var monObjet = mesElements.LoadElement("monObjetBase_"+Objet.id);
 
	if(monObjet == false){
		eval("var monObjetBase_"+Objet.id+ "= new scrollObject(Objet); var monObjet = monObjetBase_"+Objet.id);
		mesElements.Add(monObjet);
	}
 
	if(Direction == "up"){
		monObjet.bendUp();
	}
	else if(Direction == "down"){
		monObjet.bendDown();
	}
 
}
 
 
 
//Collection de div expansible
function ListeElements(){
	//Méthode permettant d'ajouter un objet à la collection
    this.Add=function(obj)
    {
        this.push(obj);
    }
	//méthode permettant de charger un élément de la collection
	this.LoadElement = function(IdToLoad){
		if(this.length > 0){
			for(i=0;i<this.length;i++){
				if(this[i].Id == IdToLoad){
					return this[i];
				}
			}
			return false;
		}
		else{
			return false;
		}
	}
 
}
 
//Cette fonction permet de créer des collections d'objet de n'importe quel type
function CreateCollection(ClassName)    
{
    var obj=new Array();
    eval("var t=new "+ClassName+"()");
    for(_item in t)
        {
            eval("obj."+_item+"=t."+_item);
        }
    return obj;
}
 
</script>
<style type="text/css">
	#toto{
		width:500px;
	}
</style>
</head>
<body>
<div id="toto" style="width:500px;height:200px;border:1px solid #666;background-color:#cccccc">toto</div>
 
<input type="button" value="toto Up" onclick="testBend(document.getElementById('toto'),'up')" />
<input type="button" value="toto Down" onclick="testBend(document.getElementById('toto'),'down')" />
 
</body>
</html>

ba le fait qu'il se déroule doucement. J'arrive à faire qu'il se déroule ca c'est bon ^^. Et merci pour ton code je vais essayer :king: