Fenêtre déroulante apparante

Version imprimable

20/04/2011, 14h28
Vinceee38

Fenêtre déroulante apparante

Bonjour tout le monde,

Je naviguais sur le site http://www.miwim.fr/ par hasard et j'ai remarqué qu'en cliquant sur "Me connecter" tout en haut qu'une sorte de panel déroulant apparait proposant la connexion.

J'ai cherché sur le net comment reproduire le même effet et j'ai trouvé l'effet blind de jquery : http://jqueryui.com/docs/show/ qui ressemble un peu.

Est ce que vous avez une idée pour m'aider à reproduire la même réaction ?

Merci d'avance
20/04/2011, 16h11
loukoum82

sans utiliser jqueryUI, ça n'a pas l'air très compliqué : ça ressemble à un div dont le height serait à 0, la position à absolute ,le top à 0, le z-index supérieur aux autres et dont on augmenterait progressivement le height grace à un setTimeout

ah et peut bien aussi overflow à hidden
20/04/2011, 16h29
SpaceFrog

sujet déja traité ...

sinon y'en a plein google :
http://www.webresourcesdepot.com/wp-...sliding-menu/#

et en javascript sa peut donner ca

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
 
<!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>
<title>menu gauche</title>
<style type="text/css">
 
#divg{
position:fixed;
top:0px;
width:100%;
height:auto;
z-Index:10;
}
 
 
#nunu{
top:0px;
width:100%;
height:0px;
z-Index:10;
overflow:hidden;
background-color:#84a5c9;
}
 
#touche{
position:absolute;
bottom:-20px;
right:60px;
width:100px;
height:20px;
background-color:#84a5c9;
-moz-border-radius:10px 0px 10px 0px;
-webkit-border-radius:0px 0px 10px 10px;
-o-border-radius:0px 0px 10px 10px;
border-radius:0px 0px 10px 10px;
}
 
#carrejaune{
 
margin-top:60px;
margin-left:600px;
width:300px;
height:100px;
background-color:white;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
 
</style>
 
<script type="text/javascript" language="JavaScript">
 
function aller(){
 
 
var nume=document.getElementById('nunu')
nume.style.height=nume.offsetHeight+10+'px'
if(nume.offsetHeight==200){
document.getElementById('touche').onclick=retour
return false
}
setTimeout(aller,10)
}
 
function retour(){
 
var nume=document.getElementById('nunu')
nume.style.height=nume.offsetHeight-10+'px'
if(nume.offsetHeight<=0){
document.getElementById('touche').onclick=aller
return false
}
setTimeout(retour,20)
}
 
 
</script>
</head>
<body>
<div id='divg'>
 
<div id='touche' onclick='aller()'>
</div>
 
<div id="nunu">
<div id="carrejaune">
</div>
</div>
 
</div>
</body>
</html>

20/04/2011, 20h00
Vinceee38

Super !!! Merci bcp pour vos réponses, j'ai tout ce qu'il me faut, j'ai même le choix de la méthode :ccool: