28172 sujets

CSS et mise en forme, CSS3

Menu CCS3 >> Utilisation des Transitions

Bonjour,

Je viens de réaliser un menu classique basé sur une liste.
Je me suis servi de l'article d'Antoine Cailliau comme source.
J'ai appliqué une rotation aux liens de -90° afin de les avoir en position verticale.
J'ai un niveau technique plutôt bas, je suis plutôt créa dans l'âme, alors je me retourne vers vous tous afin de mettre en avant le gros tas d'erreurs que j'ai pu faire.
Ca fait deux jours que je m'arrache les cheveux sur ce bidule !

Merci pour vos retours.

>> Le rendu souhaité (en haut à droite de la maquette) :

upload/20431-test.jpg


>> L'html : 
<body>
<div id="nav">
	<ul id="navigation">
		<li><a href="#">HOME</span></a></li>
		<li><a href="#">PRESTATIONS</a></li>
		<li><a href="#">BOOK</a></li>
		<li><a href="#">CONTACT</a></li>
	</ul>
</div>



>> le Css : 
body {
	background-color: #121212;
	font-family: Arial;
	font-size: 26px;
	font-weight: bold; 
	}

* {
	margin: 0;
	padding: 0;
}

#nav {
	margin: -40px 0 0 -60px;
}

#navigation { 
    list-style: none; 
}

#navigation li {
	display: inline;
}

#navigation li a {
	float: left;
	display: block;
	width: 220px;
	height: 50px;
	padding: 25px 0 0 10px;
	margin: 50px -135px 0px -10px;
	color: white;
	text-decoration: none;
	writing-mode: bt-rl;
	background-color: #cb61c9;

	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);	
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);

	transition-property: background-color, margin-top;
	transition-duration: 200ms;	
	-moz-transition-property: background-color, margin-top;
	-moz-transition-duration: 200ms;
	-o-transition-property: background-color, margin-top;
	-o-transition-duration: 200ms;
	-webkit-transition-property: background-color, margin-top;
	-webkit-transition-duration: 200ms;
	
	border-radius: 10px;
	-o-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;

}

#navigation li a:hover, a:focus {
		background-color: #333333;
		margin-top : 90px;
}



>> le rendu en ligne à cette adresse

Merci de m'avoir lu Smiley ravi

Yvan.
Modifié par fufu (05 Mar 2011 - 17:15)
Outch, je viens de tester sous IE9 c'est un désastre ...
Modifié par fufu (05 Mar 2011 - 16:46)
Erreurs relevées:

body {
	font-family: Arial;
	font-size: 26px;
	font-weight: bold;
}

J'espère que c'est pour du test uniquement tout ça (je crois pas que le 26px bold soit souhaité pour l'ensemble de la page, et la font-family pourrait au moins préciser la sans-serif).

#nav {
	margin: -40px 0 0 -60px;
}
#navigation li a {
	float: left;
	margin: 50px -135px 0px -10px;
	...
}

Un peu crade, pas très fiable et maintenable ce positionnement à coup de marges négatives.
Pourquoi ne pas plutôt laisser les LI les uns sous les autres (menu vertical), puis faire pivoter le menu entier (#navigation) plutôt que chaque lien individuellement. J'ai fait un petit test et ça marche plutôt bien. Pour le décalage des liens au survol, je pencherais plutôt pour du positionnement relatif (position:relative; right: 0;, et right: 90px; au survol).

... {
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);	
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
}

Manque un -ms-transform pour IE9. Et le transform tout court devrait être placé à la fin, pas au début.

... {
	transition-property: background-color, margin-top;
	transition-duration: 200ms;
}

Non supporté par IE9. Qu'est-ce qui est prévu pour un affichage correct dans IE 7-9?

#navigation li a:hover, a:focus {}

Le deuxième sélecteur est faux.
Modifié par fvsch (05 Mar 2011 - 19:42)
bonsoir,

pour lte IE 8, je conseillerais plutot le filtre matrix pour effectuer la rotation que writing-mode:
exemple sur navigation:

<!--[ if lte ie 8]>
<style>
#navigation {filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0,sizingMethod='auto expand');}
/* reactivation effet hover sur lien , effet secondaire des filtre activex en general pertirbant l'affichage */
#navigation a {filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1,sizingMethod='auto expand');}
</style>
<![ endif]-->


noter que transform:matrix() est aussi disponible en CSS3.
transform-origin permet de modifier le point de rotation de l'element qui par defaut est centrale il me semble (transform-origin:50% 50%;)
pour plus d'info revoir : http://www.w3.org/TR/css3-2d-transforms/

Enfin le menu en rotation peut-être compatible pour IE ->8 exepté l'effet de transition css sans l'aide de javascript.
Merci pour vos informations, je vais retravailler l'ensemble avec vos remarques.

Je vous remontre tout ça courant semaine prochaine.

Yvan.
Sujet clos
Aller à