Effet slide CSS3
arm57
Messages postés
317
Statut
Membre
-
Guiver Messages postés 270 Statut Membre -
Guiver Messages postés 270 Statut Membre -
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:
Et le code HTML
Quelqu'un pourrait m'éclairer sur ce qui n'a pas été pour que rien ne fonctionne?
Merci d'avance!
--
"Les Hommes ne lâchent jamais l'affaire, sauf quand leurs propres vies sont en danger"
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!
--
"Les Hommes ne lâchent jamais l'affaire, sauf quand leurs propres vies sont en danger"
1 réponse
-
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 êtrediv#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 ;)
