Bom galera da OfMixers, esse tutorial de hoje ensina como por Menu Vertical Fast, que fica muito lgl no seu blog =D. bom vamos a o que interessa:
Para Colocar esse efeito primeiro procure por: ]]>
, e acima dele cole o seguinte codigo
/* Menu Vertical
-----------------------------------------------*/
#menuvertical li {
margin:0;
padding-top:0;
padding-bottom:.25em;
padding-$startSide:15px;
line-height:1.5em;
list-style:none;
}
#menuvertical li {
height:20px;
font-family:Arial;/*TIPO DA FONTE*/
margin:-1px 0 0 3px;
text-indent:-15px;
text-shadow:0 0 .3em #2a2a2a;/*SOMBRA DO TEXTO*/
font-weight:bold;
color:#000;/*COR DA FONTE*/
text-decoration:none;
padding:1px 0 0 15px;
font-size:15px;
text-decoration:none;
padding:0px 0 0 1px;
font-size:120%;
}
#menuvertical li:hover{
height:20px;
font-family:Arial;
text-indent:-15px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.2s linear;
transition: all 0.5s linear;
}
#menuvertical li a{
padding:0px 0 0 18px;
font-family: Century Gothic;/*TIPO DA FONTE*/
font-size:17px;/*TAMANHO DA FONTE*/
width:186px;/*LARGURA*/
height:20px;/*ALTURA*/
font-weight:normal;/*ESTILO DA FONTE*/
color:#c2c2c3;/*COR DA FONTE*/
text-decoration:none;
display:block;
border-bottom:1px solid #e0e1e4;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
#menuvertical li a:hover{
color:#0e0e0e;/*COR DA FONTE*/
width:186px;/*LARGURA*/
height:20px;/*ALTURA*/
text-decoration:none;
border-bottom:1px solid #e1e2e3;/*COR DA BORDA INFERIOR*/
-webkit-transition:All 0.2s ease;
-moz-transition:All 0.2s ease;
-o-transition:All 0.2s ease;
padding-left:28px;
}
Bom Depois disso add um novo gadget, HTML/JavaScript e cole:
<div class='menuhorizontal-fast'>
<a href='#'>Test</a>
<a href='#'>Test</a>
<a href='#'>Test</a>
<a href='#'>Test</a>
<a href='#'>Test</a>
</div>
Proto, Agora é só ajeita o lugar da sibebar e Proto ^^
Não esqueça de dar um like para nós no Facebook ^^
Nenhum comentário:
Postar um comentário