Menu Vertical coulissant -> Deviantart

**gandoulfe** · 13/02/2008, 18h03

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.

**le_chomeur** · 14/02/2008, 09h46

voila les base du menu

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
 
<!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

**gandoulfe** · 15/02/2008, 16h38

merci beaucoup

Je vais essayer de me débrouiller.

Menu Vertical coulissant -> Deviantart

JavaScript

Discussions similaires

Partager

Partager