Menu Vertical coulissant -> Deviantart

Bonjour a tous,

Je cherche sur internet des ressources pour essayer de reproduire le menu vertical et coulissant que l'on peut voir sur www.deviantart.com

L'effet est le meme que sur l'iphone, quand on choisie une catégorie la page coulisse pour montrer la nouvelle page.

J'imagine qu'il faudrai utiliser les ressources scriptaculous prototype.

Si quelqu'un aurait des sources, ou une explication.

Merci beaucoup passez une bonne soirée.

voila les base du 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
 
<!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=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
function $(element){
	return document.getElementById(element);
}
var timer = null;
function slideUp(bigMenu,smallMenu){
	if(parseInt($(bigMenu).style.left) < 0){
		$(bigMenu).style.left = parseInt($(bigMenu).style.left) + 10 + "px";
		$(smallMenu).style.left  =parseInt($(smallMenu).style.left) + 10 + "px";
		timer = setTimeout('slideUp("'+bigMenu+'","'+smallMenu+'")',10);
	}
	else{
		clearTimeout(timer);
		alert("timer up bien kill");
	}
}
 
function slideDown(bigMenu,smallMenu){
	if(parseInt($(bigMenu).style.left) > 0){
		$(bigMenu).style.left = parseInt($(bigMenu).style.left) - 10 + "px";
		$(smallMenu).style.left =parseInt($(smallMenu).style.left) - 10 + "px";
		timer = setTimeout('slideDown("'+bigMenu+'","'+smallMenu+'")',10);
	}
	else{
		clearTimeout(timer);
		alert("timer down bien kill");
	}
}
</script>
</head>
 
<body>
<div id="conteneur" style="width:200px;height:400px;border:2px solid #333;">
<div style="width:200px;height:400px;overflow:hidden;position:relative;background-color:#999900">
	<div id="rouge" style="width:200px;height:400px;background-color:#990000;position:absolute;top:0px;left:0px;" onclick="slideDown('vert','rouge')">
	et avec du texte
	</div>
	<div id="vert" style="width:200px;height:400px;background-color:#006633;position:absolute;top:0px;left:200px;" onclick="slideUp('rouge','vert')">
	et du texte different
	</div>
</div>
</div>
</body>
</html>

je te laisse faire le tient toi même si tu as besoins d'aide pour comprendre certaines choses n'hésite pas

merci beaucoup

Je vais essayer de me débrouiller. :mrgreen: