29/05/2012

Tutorial: Menu de barrinhas hover

||

Aqui vai um menu simples e ótimo para usar como base, os créditos vão para o blog Sweet Poison. Caso queira ver como ele é basta clicar aqui: www

Em seu HTML procure por, ]]></b:skin> acima dessa tag, coloque:
#navigation {
float:left; /* Alinhamento */
width:93px; /* Largura das caixinhas */
}

#navigation a:hover {
-webkit-transition:0.3s linear; /* Efeito fade */
}

.nav a {
display:block;
background-color:#F5F5F5; /* Cor do background */
font-size:9px; /* Tamanho da fonte */
font-family:Georgia; /* Fonte */
text-transform:lowercase; /* Estilo do texto. Lowercase=minúsculas e Uppercase=maíusculas */
color:#C0BBBE; /* Cor do texto */
text-align:right;  /* Alinhamento do texto */
padding:3px; /* Margem interna */
letter-spacing:1px; /* Espaçamento das letras */
border-right:#87CEFA 2px solid; /* Borda lateral normal */
border-left:#fff 5px solid; /* Borda, representa o espaço entre os links */
cursor:crosshair; /* Cursor */
opacity:0.9; /* Opacidade */
}

.nav a:hover {
opacity:0.7; /* Opacidade */
border-right:10px solid #DCDCDC; /* Borda lateral hover */
}

 Agora você adiciona um gadget de HTML/Javascript e dentro coloque esse codigo:

<div id="navigation"><div class="nav">

<a href="URL 1">LINK 1</a>&nbsp;
<a href="URL 2">LINK 2</a>&nbsp;
<a href="URL 3">LINK 3</a></div></div><div id="navigation"><div class="nav">
<a href="URL 4">LINK 4</a>&nbsp;
<a href="URL 5">LINK 5</a>&nbsp;
<a href="URL 6">LINK 6</a></div></div><div id="navigation"><div class="nav">
<a href="URL 7">LINK 7</a>&nbsp;
<a href="URL 8">LINK 8</a>&nbsp;
<a href="URL 9">LINK9</a></div></div>
</div>

Nenhum comentário:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram