Designer Jumper - Navegue nesse mundo de designer!

Ola galera hoje eu kushirama vim ensinar a vc,s como criar um menu cs3 com animação

1: galera para instalar o menu você vai precisar ir no painel do seu blog clicar em modelo e procurem pela tag

]]><//b:skin>

E Depois colem esse codigo

* {margin: 0; padding: 0; outline: none;}

img {border: none;}

a { 
 text-decoration:none; 
 color:#00c6ff;
}

h1 {
 font: 4em normal Arial, Helvetica, sans-serif;
 padding: 20px; margin: 0;
 text-align:center;
 color:#bbb;
}

h1 small{
 font: 0.2em normal  Arial, Helvetica, sans-serif;
 text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
 display: block;
}

h2 {
 font: 2em normal Arial, Helvetica, sans-serif;
 padding-bottom:30px;
 color:#fff;
 display:block;
}

h3 {
 font: 1em Arial, Helvetica, sans-serif;
 font-weight:bold;
 color:#fff;
 display:block;
 padding:10px;
}

.container {
 width: 960px;
 margin: 0 auto; 
 overflow: hidden;
 position:relative;
 padding-bottom:50px;
}

/* CSS3 TRANSITION DesignerJumper */
#paneltwo { 
 width:300px;
 list-style:none; 
 position:relative;
 display:inline;
}

#paneltwo li {  
 border-radius:3px 3px 3px 3px; 
 margin-top:5px;
 width:150px;
 float:left;
 overflow:hidden;
 position:relative;
 background: #000000;
 background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
 background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
 background: -o-linear-gradient(top, #161616 0%,#000000 100%);
 border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
}

#paneltwo li.mask { /* It allows us to hide the link behind it */
 z-index:10; 
 overflow:hidden;
}

#paneltwo li.linkOne, #paneltwo li.linkTwo, #paneltwo li.linkThree, #paneltwo li.linkFour, #paneltwo li.linkFive 
{   -moz-transition: all 1s ease-in-out;
 -webkit-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
}

#paneltwo:hover li.linkOne, #paneltwo:hover li.linkTwo, #paneltwo:hover li.linkThree, #paneltwo:hover li.linkFour, #paneltwo:hover li.linkFive 
{  -moz-transform:translateX(0px);
 -moz-transition: all 1s ease-in-out; 
 -webkit-transform:translateX(0px);
 -webkit-transition: all 1s ease-in-out; 
 -o-transform:translateX(0px);
 -o-transition: all 1s ease-in-out; 
}

#paneltwo li.linkOne {
 -moz-transform:translateX(-90%); 
 -moz-transition-delay:0.6s; 
 
 -webkit-transform:translateX(-90%); 
 -webkit-transition-delay:0.6s; 
 
 -o-transform:translateX(-90%); 
 -o-transition-delay:0.6s; 
 
 z-index:5; 
}
#paneltwo li.linkTwo { 
 -moz-transform:translateX(-180%); 
 -moz-transition-delay:0.5s; 
 
 -webkit-transform:translateX(-180%); 
 -webkit-transition-delay:0.5s; 
 
 -o-transform:translateX(-180%); 
 -o-transition-delay:0.5s; 
 
 z-index:4;
}
#paneltwo li.linkThree { 
 -moz-transform:translateX(-270%); 
 -moz-transition-delay:0.4s; 
 
 -webkit-transform:translateX(-270%); 
 -webkit-transition-delay:0.4s; 
 
 -o-transform:translateX(-270%); 
 -o-transition-delay:0.4s;
 
 z-index:3;
}
#paneltwo li.linkFour { 
 -moz-transform:translateX(-360%); 
 -moz-transition-delay:0.3s;
 
 -webkit-transform:translateX(-360%); 
 -webkit-transition-delay:0.3s;
 
 -o-transform:translateX(-360%); 
 -o-transition-delay:0.3s; 
 z-index:2;
}

#paneltwo li.linkFive { 
 -moz-transform:translateX(-450%); 
 -moz-transition-delay:0.2s;
 
 -webkit-transform:translateX(-450%); 
 -webkit-transition-delay:0.2s;
 
 -o-transform:translateX(-450%); 
 -o-transition-delay:0.2s;
  
 z-index:1;
}

#paneltwo:hover li.linkOne { 
 -moz-transition-delay:0s; 
 -webkit-transition-delay:0s; 
 -o-transition-delay:0s; 
 z-index:5;
}
#paneltwo:hover li.linkTwo { 
 -moz-transition-delay:0.2s;
 -webkit-transition-delay:0.2s;
 -o-transition-delay:0.2s; 
 z-index:4;
}
#paneltwo:hover li.linkThree { 
 -moz-transition-delay:0.4s;
 -webkit-transition-delay:0.4s;
 -o-transition-delay:0.4s; 
 z-index:3;
}
#paneltwo:hover li.linkFour { 
 -moz-transition-delay:0.6s;
 -webkit-transition-delay:0.6s;
 -o-transition-delay:0.6s; 
 z-index:2;
}
#paneltwo:hover li.linkFive { 
 -moz-transition-delay:0.8s;
 -webkit-transition-delay:0.8s;
 -o-transition-delay:0.8s; 
 z-index:1;
}

#paneltwo li a { 
 color:#fff; 
 display:block; 
 padding:10px;
}

Depois de ter inserido este codigo vc,s vão procurar por

Se vc quer q o seu menu fique na parte do topo do seu blog Mais vc,s podem tambem colocar em outros lugares mais as pessoas normalmente colocam no Topo

Tutoriais