Tutorial - Menu Lollipop

 

Olá, novamente. 

Desta vez trago para vocês o primeiro tutorial - e também o primeiro request realizado - desde a entrada ao tempo de Hiatus. O tutorial é desse menu que temos ao lado, ele é um pouquinho complicado, mas com atenção vocês conseguem fazer.

Existe sim uma forma mais prática de fazer, mas irei mostrar como é que eu o fiz aqui. Caso precisem da outra forma, procurem menus semelhantes e convertam, pois este aqui foi feito inteiramente por minha pessoa.

Sintam-se livres para usar e/ou reblogar, mas lembrem-se de creditar tudo.

A primeira coisa a fazer, é explicar a vocês a estrutura deste menu. Faremos linha por linha (linha azul1, linha azul 2, linha rosa1, linha rosa2), por isso é preciso paciência.

1. Vá até Modelo > Editar HTML e procure por ]]></b:skin>, ao encontrar cole acima:

#lollipop{

-webkit-transition-duration: 1.0s;

font-family:'Play';

font-size:12px;

}

#lollipop .color1 a{

background:#616161;

display: block;

padding:5px 210px 5px 7px;

position:absolute;

-webkit-transition-duration: .50s;

color:#fff;

text-shadow:1px 1px 0px #414040;

border:1px solid #5c595a;

-moz-box-shadow: inset 0 0 10px #414040;

-webkit-box-shadow: inset 0 0 10px #414040;

box-shadow: inset 0 0 10px #414040;

}

#lollipop .color1 a:hover{

background:#646363;

display: block;

padding:5px 210px 5px 7px;

margin-left:-5px;

position:absolute;

-webkit-transition-duration: .50s;

color:#fff;

text-shadow:1px 1px 0px #414040;

}

 O código é bem simples, acho que todos conseguem entender onde mudar as coisas. Caso tenha dúvidas, me procure. 

2. Vá até um gadget de HTML/JavaScript e cole:

<div id="lollipop">

<div class="color1"><a href="seulink.com">Nome do Link</a></div> <br />

</div>

Você verá sua 'linha' pronta. Para fazer a segunda de outra cor, você precisa fazer o tutorial por duas vezes. Troque o color1 por color2 e configure como quiser. Lembre-se de que irá precisar posicionar manualmente, o menu não fica um embaixo do outro. Para ficar, adicione nas outras vezes:

margin-top: 12px;

E configure até achar a posição desejada.