Effet slide CSS3

Fermé
arm57 Messages postés 259 Date d'inscription mardi 21 juillet 2009 Statut Membre Dernière intervention 11 février 2017 - 16 oct. 2012 à 20:30
Guiver Messages postés 262 Date d'inscription mardi 30 novembre 2010 Statut Membre Dernière intervention 20 mai 2021 - 23 avril 2013 à 10:05
Bonjour,
Voilà, j'aimerais produire cette effet: http://www.css3create.com/Menu-Slides-avec-CSS3

J'ai donc suivi les quelques indications que j'ai à ma disposition, mais... Absolument rien n'a fonctionné!

Voilà le code CSS:
<style type="text/css">
#test div.menu{
position:relative;
width:505px;
height:220px;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
background:#272c31;
}
#test ul{
width:489px;
height:209px;
margin:auto;
padding:3px;
background:black;
overflow:hidden;
border-bottom:1px solid rgba(255,255,255,0.35);
}
#test ul li div{
height:208px;
width:324px;
color:#6F7A81;
margin-left:33px;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
background:#bdc7d0;
}
#test ul li{
position:relative;
float:left;
overflow:hidden;
width:30px;
height:209px;
margin-right:3px;
list-style:none;
text-align:right;
font-size:1.1em;
/*transition*/
-webkit-transition:width 1s ease;
   -moz-transition:width 1s ease;
     -o-transition:width 1s ease;
        transition:width 1s ease;
}
#test ul li:last-child{
margin-right:0px;
}
#test ul li a{
display:block;
position:absolute;
z-index:20;
bottom:-30px;
left:0px;
height:26px;
width:182px;
padding-right:25px;
padding-top:4px;
color:#fff;
text-decoration:none;
border-right:1px solid rgba(255,255,255,0.35);
border-left:1px solid #000;
text-shadow:1px 0px 0px rgba(0,0,0,0.8);
/*transform-origin*/
-webkit-transform-origin:0px 0px;
   -moz-transform-origin:0px 0px;
    -ms-transform-origin:0px 0px;
     -o-transform-origin:0px 0px;
        transform-origin:0px 0px;
/*transform*/
-webkit-transform:rotate(-90deg);
   -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
     -o-transform:rotate(-90deg);
        transform:rotate(-90deg);
border-radius:5px;
background:#353b42;
}
#test ul li:hover{
width:357px;
}
#test ul li:hover a{
text-shadow:1px 0px 0px rgba(0,0,0,0.25);
background:#d64e00;
}
</style>


Et le code HTML
<div id="test">
<ul>
<li><a href="">Test 1</a><div>Blabla

</div></li>
<li><a href="">Test 2</a><div>Blabla

</div></li>
<li><a href="">Test 3</a><div>Blabla

</div></li>
<li><a href="">Test 4</a><div>Blabla

</div></li>
<li><a href="">Test 5</a><div>Blabla

</div></li>
</ul>
</div>


Quelqu'un pourrait m'éclairer sur ce qui n'a pas été pour que rien ne fonctionne?

Merci d'avance!



1 réponse

Guiver Messages postés 262 Date d'inscription mardi 30 novembre 2010 Statut Membre Dernière intervention 20 mai 2021 87
23 avril 2013 à 10:05
Salut,

Merci d'indenter ton code, ce sera plus facile à lire.
Tu n'as pas de balise pour l'affichage du texte, c'est peut être ça.
Tu as changer le nom des classes/id HTML sans le changer dans le CSS.
Par exemple ta balise div qui englobe le tout est :
<div id="test">

alors que ton CSS correspondant est :
#test div.menu{

Ca devrait plutôt être
div#test {


Reprend l'exemple depuis le début indiqué sur le lien que tu as fournis. Il n'est pas long en plus. Tu verras vite les erreurs que tu as fait ;)
0