Menu Tabs

Ai blogueiros da madrugada, isso parece frase de locutor de rádio né? Mas trago um rápido tutu para vocês, ou quase rápido. Ele se chama "Menu Tabs", ele é um modelo mais antigo do famoso menu que passa o mouse por cima da imagem , aparece uma palavra abaixo. Não sei explicar bem esses bagulhos, então dêem uma olhadinha no menu mais a abaixo. Ele esta bem em cima das postagens. Gostou? Quer aprender como se faz? Então dêem outra dentada para abrir a postagem e siga-me os bons.

Brevia do efeito

O tutorial eu peguei no blog KW, então credite, o menu é originalmente do tumblr Things to help you, então credita também. Agora sim vamos ao tutorial.

1.  Como sempre aquela parte chata, blá blá blá painel mais blá blá blá ir ate o seu HTML e procure por ]]></b:skin>, acima dele adicione esse bendito código:

Códigos

#nav {

font-family: Georgia, cursive; 

text-transform: uppercase; 

width: 60px; 

height: 20px;  

background: #dda4c4; 

padding: 5px; 

text-align: center;

 margin: 10px; 

align: left; 

font-size: 20px;

 font-weight: none; 

margin-bottom: 3px;

 float: left; 

cursor: hand;

 -webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

transition: all 1s ease; border-radius: 3px;

 line-height: 20px;

}

#nav a{

color: #ffffff;

}

#ops {

background: transparent; 

color: #ae539a; 

width: 80px; 

font-family: Georgia; 

font-size: 18px; 

text-align: center; 

margin-top: 10px; 

text-transform: none; 

opacity: 0;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

}

#nav:hover #ops {

opacity: 1;  

-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;

}

O código e bem fácil de entender, mas caso precise de explicação, veja a imagem neste link. Nela, estão explicadas as partes mais importantes do código. Agora depois de tudo pronto, salve. Blá, blá, blá vá ate seu layout agora.

2. Abra um novogadget de HTML/JavaScript, cole dentro dele:

Códigos

<div id="nav">

<a href="link"> 01 <div id="ops">  Home </div></a></div>

 Se quiser mais caixinhas do menu é só repetir, todo o código. Blá blá blá ate mais tarde irei ver um bom dorama agora, beijos e boa noite a todos.