28172 sujets

CSS et mise en forme, CSS3

Problème menu

Bonjour,

Je rencontre actuellement un problème avec mon menu, et plus particulièrement pour lui attribuer une transition CSS3 ...
Je me tourne donc vers vous, après avoir lu de nombreuses explications sur les transitions CSS3, et de nombreuses tentatives, mais sans succès ...

Mon menu est construit de la sorte :

<ul class="menuPrincipal">
     <li class="menuHome"><a href="#"><img src="img/home_no.png" alt="Accueil" /></a></li>
     <li class="menuPrestations"><a href="#">Prestations</a>
          <ul class="subMenu">
               <li><a href="#">Prestation 1</a></li>
               <li><a href="#">Prestation 1</a></li>
               <li><a href="#">Prestation 1</a></li>
          </ul>
     </li>
     <li class="menuSociete"><a href="#">Société</a></li>
     <li class="menuContact"><a href="#">Contact</a></li>
</ul>


Je souhaiterais avec les transitions css3 (si possible ?), que mes sous menus arrivent avec un effet de transition de type fondu de couleur de fond.

J'ai donc testé le code css suivant, qui me semble pourtant pertinent, mais qui ne fonctionne pas ...


.menuPrincipal > li > .subMenu{
	/* Fonctionne déjà sur webkit */
		   		-webkit-transition-property: background-color;
				-webkit-transition-duration: 2s;
				
				/* Bientôt supporté par Firefox */
       		 	-moz-transition-property: background-color;
				-moz-transition-duration: 2s;
				
				/* … et lorsque ce sera standardisé */
				transition-property: background-color;
				transition-duration: 2s;
}

.menuPrincipal > li:hover > .subMenu{
	background-color:#666666;
}


Pourriez-vous m'aider ?
Merci d'avance à tous è
salut,

je verrais plutôt ça pour tes transitions: 
-webkit-transition: background 2s ease-in-out;
-moz-transition: background 2s ease-in-out;
-ms-transition: background 2s ease-in-out;
-o-transition: background 2s ease-in-out;
transition: background 2s ease-in-out;

Modifié par jmlapam (30 Dec 2012 - 23:27)
Merci pour ton aide, mais ça ne résoud pas mon problème ...

Lorsque je survole mon <li> ayant la class "menuPrestations", je n'ai aucune transition sur le "subMenu" correspondant ...
J'ai bien essayé ça :

.menuPrincipal > li > .subMenu{
	padding:0 13px;
	line-height:25px;
	z-index:9999;
	-webkit-transition: background 2s ease-in-out;
	-moz-transition: background 2s ease-in-out;
	-ms-transition: background 2s ease-in-out;
	-o-transition: background 2s ease-in-out;
	transition: background 2s ease-in-out;
}

.menuPrincipal > li:hover .subMenu{
	background-color:#666666;
}


Mais ça n'a rien changé ...

.menuPrincipal > li > .subMenu{
	padding:0 13px;
	line-height:25px;
	z-index:9999;
	-webkit-transition: background 2s ease-in-out;
	-moz-transition: background 2s ease-in-out;
	-ms-transition: background 2s ease-in-out;
	-o-transition: background 2s ease-in-out;
	transition: background 2s ease-in-out;
}

.menuPrincipal li:hover .submenu{
	background-color:#666666;
}


Avec ça, je n'ai plus de couleur d'arrière plan sur .submenu ...
Oups, le boulet ... Smiley confused

Effectivement ça fonctionne sur Firefox, mais pas sur Safari. Je testais sur Safari Smiley cligne
Modifié par Fabien2 (07 Jan 2013 - 11:59)
Sujet clos
Aller à