Menu Grow
Visualização (xxxx)
Cole o código a seguir ANTES de </style>
/* Menu by Laira/cssandhtml-4you */ .menu { width:100px; height:0px; margin-left:210px; margin-top:-100px; position: fixed; } .menu a { text-align:center; float:left; width:100px; height:22px; font-family: 'Tahoma'; font-size:9px; color:#fff; line-height:22px; background-color:#sua-cor; margin-bottom:1px; margin-left:1px; transition: all 0.7s ease-out; padding:3px; } .menu a:hover { background:#outra-cor; color: #fff; width: 170px; transition: all 0.7s ease-out; }
Personalizando:
background-color: #sua-cor troque o sua-cor pela cor que quer que seja seu menu.
background-color: #outra-cor troque o outra-cor pela cor que quer que fique quando passar o mouse por cima.
color: #fff ai você personaliza a cor da fonte.
margin-left: 210px ai você troca o 210 pela distância que vc quer que fique da esquerda.
margin-top: -100px você troca o -100 pela distância que vc quer que fique do topo
PS: Você pode gerar sua cor aqui (x) , aqui ou no ps
Agora, cole o código a seguir onde quer que apareça:
<div class="menu"> <a href="/">Nome</a> <a href="/">Nome</a> <a href="/">Nome</a> <a href="/">Nome</a> <a href="/">Nome</a> </div>
Bom, é isso.Qualquer dúvida a ask esta a sua disposição ;)
Os códigos do menu e o tutorial foram desenvolvidos totalmente por mim,do zero mesmo.
Se usar credite.
De like se usar/gostar.
Não reblogue nem repasse.
/Laira