Fenêtre déroulante apparante

**Vinceee38** · 20/04/2011, 14h28

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

**loukoum82** · 20/04/2011, 16h11

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

**SpaceFrog** · 20/04/2011, 16h29

sujet déja traité ...

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

Invité · 20/04/2011, 16h51

et en javascript sa peut donner ca

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

**Vinceee38** · 20/04/2011, 20h00

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

Fenêtre déroulante apparante

JavaScript

Discussions similaires

Partager

Partager