Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 D'Leandro™

avatar
Fundador

Menu Vertical


PunBB PhpBB2  PhpBB3  Invision  Blog  Site
--> Código CSS <--
Código:
/*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:15px;/*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; }
--> Código do Menu <--
Código:
<div id='menuvertical'> <li><a href='SEU LINK AQUI'>#teste</a></li> <li><a href='SEU LINK AQUI'>#teste</a></li> <li><a href='SEU LINK AQUI'>#teste</a></li> <li><a href='SEU LINK AQUI'>#teste</a></li> <li><a href='SEU LINK AQUI'>#teste</a></li> </div>
Demonstração



Desenvolvido por D'Leandro™ | designeryoo
Editado e Postado por 2012 © Staffer Group BR™
Ver perfil do usuário

#2
 Bookmarlucas654

avatar
Membro
Eita, este eu preciso e muito =D
Obrigado por publicar, excelente para widgets ;)
Ver perfil do usuário