Menu transition bizarre

Version imprimable

Bonjour, je travaille sur un menu basé sur les transitions.
Mon menu réagit exactement comme je le voulait, SAUF pour la transition principale qui réagit bizarrement.

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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
</head>
<style type="text/css">
.TitreMenu {
	background-color: #999;
	height: 20px;
	width: 100px;
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	font-style: italic;
	text-align: center;
	padding-top: 5px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
	display:block;
	overflow:hidden;
	transition:height 0.6s ease-in-out;
	-moz-transition:height 0.6s ease-in-out;
	-webkit-transition:height 0.6s ease-in-out;
	-o-transition:height 0.3s ease-in-out;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	vertical-align: middle;
	}
 
 
	.TitreMenu:hover{
	height:auto;	
		}
 
	.SousMenu {
	transition:background 0.9s ease-in-out;
	-moz-transition:background 0.9s ease-in-out;
	-webkit-transition:background 0.9s ease-in-out;
	-o-transition:background 0.9s ease-in-out;
	height: 20px;
	width: auto;
	background-color: #0099FF;
	opacity: 0.8;
	}
 
.SousMenu:hover {
	background:#ECECEC;
}
</style>
<body>
<div class="TitreMenu" >
Titre Menu
<div class="SousMenu">
Présentation
</div>
<div class="SousMenu">
Notre équipe
</div>
<div class="SousMenu">
Autre...
</div>
</div>
</body>
</html>

Si quelqu'un a une idée pour faire une transition propre tout en gardant le Height:auto; de Titremenu:hover, ce serait du bonheur :)

Merci d'avance pour votre aide.

Salut,

ce que tu peux faire c'est plutot agir sur le .SousMenu
Par défaut mais une hauteur à 0px et quand tu feras un hover de ton .TitreMenu, applique une hauteur à tes .SousMenu (20px)

De plus par défaut met height:auto sur ton .TitreMenu afin que la hauteur s'adapte automatiquement.

Voici ce que cela donne au niveau code (j'ai optimisé ton code pour utiliser des shorthand) :

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
.TitreMenu {
		background-color: #999;
		height: auto;
		width: 100px;
		font-family: "Times New Roman", Times, serif;
		font-size: 18px;
		font-style: italic;
		text-align: center;
		padding-top: 5px;
		border:3px solid #000;
		overflow:hidden;
		transition:all 0.6s ease-in-out;
		-moz-transition:all 0.6s ease-in-out;
		-webkit-transition:all 0.6s ease-in-out;
		-o-transition:all 0.6s ease-in-out;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
		border-radius:10px;
	}
	.TitreMenu:hover .SousMenu{
		height:20px;
	}
	.SousMenu {
		transition:all 0.9s ease-in-out;
		-moz-transition:all 0.9s ease-in-out;
		-webkit-transition:all 0.9s ease-in-out;
		-o-transition:all 0.9s ease-in-out;
		height: 0px;
		background-color: #0099FF;
		opacity: 0.8;
		overflow:hidden;
	}
	.SousMenu:hover {
		background:#ECECEC;
	}

24/06/2011, 12h35
Phrederik

Super ça, merci beaucoup.

Je savait pas qu'on pouvait influer sur un autre éléments que celui que l'on touchait.
On peux faire ça tout le temps ?

Au fait c'est quoi que tu appelle des shorthand ?
24/06/2011, 15h18
ornitho13
oui on peut le faire tout le temps ( pour peu qu'on le déclare bien dans son css)

Concernant les shorthand, c'est en fait un raccourci css. Par exemple pour la bordure, au lieu d'ecrire :
Code:

1 2 3 border-style:solid; border-color:#000;
autant en écrire moins en utilsant le raccourci :
Code:

1 2 border:1px solid #000;
c'est plus rapide à écrire et en plus rapide à interpréter par le navigateur car il y a moins de code
24/06/2011, 16h54
Phrederik

merci :)