Fenêtre déroulante apparante [Résolu]

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

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

20/04/2011, 14h28	#1
Vinceee38 Membre à l'essai Inscription : avril 2007 Messages : 120 Détails du profil Informations forums : Inscription : avril 2007 Messages : 120 Points : 23 Points : 23	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
	00

20/04/2011, 16h29	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	sujet déja traité ... sinon y'en a plein google : http://www.webresourcesdepot.com/wp-...sliding-menu/# __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

20/04/2011, 16h11	#2
loukoum82 Membre du Club Développeur informatique Inscription : juillet 2007 Messages : 131 Détails du profil Informations personnelles : Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : juillet 2007 Messages : 131 Points : 64 Points : 64	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
	00

20/04/2011, 20h00	#5
Vinceee38 Membre à l'essai Inscription : avril 2007 Messages : 120 Détails du profil Informations forums : Inscription : avril 2007 Messages : 120 Points : 23 Points : 23	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email