Tutorial: Menu Stretch

 

Yoo! ^-^

Trago agora um menu que acabei de fazer para vocês. Ele é bem simples e fácil de se aplicar, tem uma borda no topo e em hover seu tamanho aumenta.

1- Vá no seu HTML e procure por ]]></b:skin>

2- Ao achar a tag cole o seguinte código acima:

.menu {

width: 60px;

height: 15px;

background: #DCDCDC; */ Cor de Fundo */

padding-top: 5px;

padding-bottom: 5px; 

border-top: 3px solid #DB7093; */ Borda do Topo */

color: #DCDCDC; */ Cor da Fonte */

margin-right: 1px;

padding-left: 5px;

padding-right: 5px; 

-webkit-transition-duration: .50s;

font-family: arial; */ Fonte */

}

menu:hover {

padding-bottom: 20px;

}

3- Agora adicione um Gadget HTML/JavaScript e cole:

<a href="URL"><menu>NOME</menu></a>

<a href="URL"><menu>NOME</menu></a>

<a href="URL"><menu>NOME</menu></a>

<a href="URL"><menu>NOME</menu></a>

Simples não é mesmo?