Menu Kit

diva~

Olá amorecos, hoje iremos aprender como aplicar um menu super perfeito, para seu layout ficar lindo sem esforços, créditos para Lovers of Designs pois achei o tutorial lá, testei em meu blog testes com as modificações de tumblr para blogger e deu certo, e irei ensinar aqui.

O menu é super fácil de colocar e fica lindo de qualquer jeito.

~Live Preview

Vamos lá, vale a pena clicar no botão de leia mais!

Cole isso acima de ]]></b:skin>:

.posicao {position:absolute; margin-top: -15px; margin-left:154px;z-index:10000000;}

.menul {background: rgba(255, 255, 255, 0.5);padding:15px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;color:#999;-moz-box-shadow:inset -1px -2px 25px #d4daef;-webkit-box-shadow:inset -1px -2px 25px #fd4daef;box-shadow:inset -1px -2px 25px #d4daef;}

.menu {background: transparent;padding:9px;padding-top:15px;margin:2px; width:100px; border-bottom:6px solid #; font-family: georgia; font-size:14px;-moz-transition:  1s; -webkit-transition:  1s;

-o-transition:  1s;color:#adb6d6; }

.menu:hover {border-bottom:5px solid #bac3e3;background: rgba(255, 255, 255, 0.5);}

• Entenda o código:

.posicao: é o que vai definir a posição do seu menu, ele quem vai mandar pra onde o menu vai, se é mais para esquerda, mais para direita, distância do topo e etc…

.menul: Esse código define a caixa maior do menu, é a caixa onde todos os links ficam dentro, tome cuidado com ela.

.menu e menu:hover: É a parte das caixinhas do menu, é ela que vai definir a fonte, cor da fonte, cor da caixinha quando passa o mouse e etc…

Cole em um HTML / Javascript para o menu aparecer:

<div class="posicao">

<div class="menul">

<a href="LINK" class="menu">Home</a>

<a href="LINK" class="menu">About</a>

<a href="LINK" class="menu">Ask</a>

<a href="LINK" class="menu">Tumblr</a>

<a href="LINK" class="menu">Links</a>

<a href="LINK" class="menu">Extras</a>

<a href="LINK" class="menu">Themes</a>

<a href="LINK" class="menu">Texts</a>

<a href="LINK" class="menu">Html</a>

</div></div></div>

Super fácil não?! espero que tenham gostado, diz aí quem vai usá-lo hehehe