Discussion :

[oceane751]

Bonjour à tous !!

J'ai ma transition qui ne fonctionne pas ni sous chrome ni sous ff

J'ai pourtant lu des tutos mais chez moi ça ne veut pas

J'ai un menu et j'aimerai que la transition se fasse quand on passe en hover et que le sous menu s'affiche

en gros j'ai :

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
nav ul li {
	float:left; 
	height:28px;
	-webkit-transition: margin-left 0.3s ease;
        -moz-transition: margin-left 0.3s ease;
         -ms-transition: margin-left 0.3s ease;
          -o-transition: margin-left 0.3s ease;
             transition: margin-left 0.3s ease;
}
 
nav ul li:hover ul {
	display:block;
	color:#FFFFFF;
	margin-left:30px;
 
}

Je ne comprends pas trop d'où vient le problème

Quelqu'un pourrait il m'aider?

En attendant, je continue à chercher

[rodolphebrd]

Bonsoir;

Ne faut-il pas appliquer les transitions à la balise <a> comme cela:

nav ul li a

[rodolphebrd]

Note : les transitions ne sont plus préfixées dans webkit depuis peu :caniuse

[oceane751]

Bonsoir;

Ne faut-il pas appliquer les transitions à la balise <a> comme cela:

nav ul li a

ah bon?
car j'ai vu pas mal de tuto qui ne l'utilise pas avec la balise a...

[rodolphebrd]

C'est ce que je fais en général : exemple

[oceane751]

ouais c'est pas mal!

mais si je fais ça

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
nav ul li a {
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	-webkit-transition: margin-left 0.3s ease;
        -moz-transition: margin-left 0.3s ease;
         -ms-transition: margin-left 0.3s ease;
          -o-transition: margin-left 0.3s ease;
             transition: margin-left 0.3s ease;
}	
nav ul li a:hover ul {
	display:block;
	color:#FFFFFF;
	margin-left:30px;
 
}

mes sous menus ne s'affichent plus...

[rodolphebrd]

Ah il y a des sous-menus...

Envoyez tout votre code pour y voir plus clair.

[oceane751]

vi !

le code css 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
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
@charset "utf-8";
/* CSS Document */
 
nav ul {
	list-style:none;
	padding:0;
	margin:0;
}
 
nav ul li {
	float:left; 
	height:28px;
}
 
nav ul li ul {
	display:none;
}
 
nav ul li{
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	-webkit-transition: margin-left 0.3s ease;
        -moz-transition: margin-left 0.3s ease;
         -ms-transition: margin-left 0.3s ease;
          -o-transition: margin-left 0.3s ease;
             transition: margin-left 0.3s ease;
}	
 
 
 
nav ul li:hover ul {
	display:block;
	color:#FFFFFF;
	margin-left:30px;
}
 
nav ul li:nth-child(1) {
	background-color:#bdafaa;
	width:76px;
}
 
nav ul li:nth-child(2) {
	background-color:#6496cc;
	width:125px;
}
 
nav ul li:nth-child(3) {
	background-color:#788a73;
	width:202px;
}
 
nav ul li:nth-child(4) {
	background-color:#e26b3b;
	width:157px;
}
 
nav ul li:nth-child(5) {
	background-color:#cb8191;
	width:143px;
}
 
nav ul li:nth-child(6) {
	background-color:#5a864e;
	width:73px;
}
 
nav ul li:nth-child(7) {
	background-color:#a1ad51;
	width:91px;
}
 
nav ul li:nth-child(8) {
	background-color:#95bb20;
	width:109px;
}
 
nav li:nth-child(2) li {
	background-color:#6496cc;
	width:200px;
}
 
nav li:nth-child(3) li {
	background-color:#788a73;
	width:200px;
}
 
nav li:nth-child(4) li {
	background-color:#e26b3b;
	width:200px;
}
 
nav li:nth-child(5) li {
	background-color:#cb8191;
	width:200px;
}
 
nav li:nth-child(6) li {
	background-color:#5a864e;
	width:200px;
}
 
nav li:nth-child(7) li {
	background-color:#a1ad51;
	width:200px;
}
 
nav li:nth-child(8) li {
	background-color:#95bb20;
	width:200px;
}

le html5

Code html :

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link type="text/css" rel="stylesheet" href="avr.css" />
<link type="text/css" rel="stylesheet" href="menu.css" />
<link type="text/css" rel="stylesheet" href="responsive.css" />
<meta name="viewport" content="width=device-width">
<title>HTML5 </title>
</head>
 
<body>
<header>
	<section style="position:relative;">
	<section id="top"><img src="images/top2.jpg"></section>
    <section id="recherche">
    	<form method="post">
            <input type="text" placeholder="recherche" size="14"/>
            <input type="submit" value="" />
        </form>
    </section>
    </section>
</header>
<div style="clear:both;"></div>
<section>
<nav>
	<ul>
    	<li><a href="#">Accueil</a></li>
        <li><a href="#">Mon quotidien</a>
        	<ul>
            	<li>ioioio</li>
                <li>ioioio</li>
                <li>ioioio</li>
                <li>ioioio</li>
            </ul>
        </li>
        <li><a href="#">Petite enfance/scolaire</a>
        	<ul>
            	<li>ioioio</li>
                <li>ioioio</li>
                <li>ioioio</li>
                <li>ioioio</li>
            </ul>
        </li>
        <li><a href="#">Economie/emploi</a>
        	<ul>
            	<li>ioioio</li>
                <li>ioioio</li>
                <li>ioioio</li>
                <li>ioioio</li>
            </ul>
        </li>
        <li><a href="#">Culture et sports</a>
        	<ul>
            	<li>ioioio</li>
                <li>ioioio</li>
                <li>ioioio</li>
                <li>ioioio</li>
            </ul>
        </li>
        <li><a href="#">Sénior</a>
        	<ul>
            	<li>ioioio</li>
                <li>ioioio</li>
                <li>ioioio</li>
                <li>ioioio</li>
            </ul>
        </li>
        <li><a href="#">Solidarité</a>
        	<ul>
            	<li>ioioio</li>
                <li>ioioio</li>
                <li>ioioio</li>
                <li>ioioio</li>
            </ul>
        </li>
        <li><a href="#">Associations</a>
        	<ul>
            	<li>ioioio</li>
                <li>ioioio</li>
                <li>ioioio</li>
                <li>ioioio</li>
            </ul>
        </li>
    </ul>
</nav>
</section>
</body>
</html>

merci

[Bovino]

Les transitions, ça s'applique lorsque des propriétés changent sur un élément.
Dans ton cas, le :hover ne s'applique que sur des éléments enfants, il n'y a donc aucune raison que la transition s'applique au parent...

En gros

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
nav ul li { /* Tu appliques un style aux balises li */
	float:left; 
	height:28px;
	-webkit-transition: margin-left 0.3s ease;
        -moz-transition: margin-left 0.3s ease;
         -ms-transition: margin-left 0.3s ease;
          -o-transition: margin-left 0.3s ease;
             transition: margin-left 0.3s ease;
}
 
nav ul li:hover ul { /* Le hover sur les li implique un changement de style des ul enfants : pas de transition envisageable ! */
	display:block;
	color:#FFFFFF;
	margin-left:30px;
}

[rodolphebrd]

Trop tard bovino plus rapide.

Effectivement avec : nav ul li:hover les transitions vont s'appliquer avec d'autres problèmes qu'ils vous faudra gérer.

[oceane751]

ah

j'aimerai bien faire comme lui
http://www.creativejuiz.fr/blog/tuto...ion-max-height

[rodolphebrd]

Je vous conseille celui-ci qui est plus didactique et met en oeuvre des règles simples.

[oceane751]

merci
il y a celui-ci aussi qui m'a l'air pas mal
http://red-team-design.developpez.co...nt-anime-css3/

[rodolphebrd]

Oui j'aime bien le design mais je préfère les transitions du précédent.

[oceane751]

je vais devoir adapter le code au mien

[rodolphebrd]

Y'a plus qu'à

[oceane751]

vi

[oceane751]

bon voilà c'est résolu

voici le code css

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
#menu li {
	position: relative;
	display:inline-block;
	list-style: none;
	width: 110px;
	padding: 6px 15px;
	text-align: left;
	background-color: #777;
}
#menu li li {
	position: relative;
	display:inline-block;
	list-style: none;
	width: 110px;
	padding: 6px 15px;
	text-align: left;
	background-color: #777;
}
#menu ul {
	position: absolute;
	top: 1.95em; left:0;
	max-height:0em;
	margin:0; padding:0;
	background-color:#ddd;
	overflow:hidden;
	-webkit-transition: 1s max-height 0.3s;
	-moz-transition: 1s max-height 0.3s;
	-ms-transition: 1s max-height 0.3s;
	-o-transition: 1s max-height 0.3s;
	transition: 1s max-height 0.3s;
	-webkit-border-radius: 0 0 8px 8px;
}
#menu>li:hover ul {
	max-height:13em;
}