Tutorial - Menu Uops

Essa é a ultima imagem que tinha do efeito que uso aqui. Estou sem o PSD, vou usar aquele efeito meia opacidade, ok?

Hoje, consegui terminar o dever de amanhã mais rápido e, como não estava cansada, não dormi hoje - vai dar pra fazer uma adiantada nas postagens programadas! Como já disse, meu tempo anda meio apertado - tenho escola, soneca, dever de casa, tempo limite no computador e etc. - mas, hoje estou conseguindo postar aqui e vou começar a fazer as postagens programadas. Minhas imagens acabaram, vou usar aquele antigo estilo do KW, ok? Não estou conseguindo baixá-lo no notebook da minha irmã.

Como estou tentando equilibrar os tutoriais e utilitários aqui do blog, decidi trazer um tutorial. O menu que trago hoje, eu achei lá no Kawaii World, mas é original do Tumblr: Things To Help You. Ele é um dos que mais visito e super recomendo, ok? Se quiser visualizar o menu, clique aqui. 

Vamos?

Esse menu é muito bonito, não? Ele é fácil de colocar e bem mais fácil de personalizar. Para usá-lo e personalizá-lo, basta colar esse código no seu css - acima de ]].

.simplemenu {

cursor: pointer; 

font-family: Georgia; 

position: absolute; 

width: 700px; 

margin-top: 28px; 

height: 62px; 

font-size: 16px; 

letter-spacing: 1px; 

overflow: hidden; 

font-style: italic; 

margin-left: 90px;}

 .simplemenu a {

color: #ffcbcb; 

padding-left: 29px; 

padding-right: 11px;

text-shadow: 0px -100px 1px #94d0cf; 

padding-top: 58px; 

-webkit-transition: all 0.8s ease; 

-moz-transition: all 0.8s ease;

-o-transition: all 0.8s ease;}

.simplemenu a:hover {

color: transparent; 

padding-left: 29px; 

padding-right: 11px; 

text-shadow: 0px 0px 0px #94d0cf; 

-webkit-transition: all 0.8s ease; 

-moz-transition: all 0.8s ease; 

-o-transition: all 0.8s ease;} 

 Eu destaquei algumas coisas que são interessantes de mudar. Tipo a cor da fonte, o tamanho da fonte... Caso queira mudar algo mais, peço que tome cuidado. Pode dar algo errado no código.

Para fazer o menu funcionar, cole esse código em um gadget de HTML/Javasript:

<div class="simplemenu">
<a href="#">Home</a>
<a href="#">Ask</a>
<a href="#">Tutoriais</a>
<a href="#">Materiais</a>
<a href="#">Faq</a>
<a href="#">Themes</a>
<a onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('main').innerHTML=document.getElementById('leia').innerHTML" title=":)">IFRAME</a>
</div>

Edite o nome dos links e o próprio link. Mas só isso, tentei editar algumas coisas no meu e não deu muito certo... Simples, o meu menu não pegou - ia usar no template novo. Sabe? Deu certo, só que não. 

Espero que tenham gostado do tutorial, os créditos estão lá acima do leia mais.

Beijocas.

/Ana