09/06/2013

TUTORIAL-menu bars

Boa tarde!
Acabei de postar no Paradise OF Young,comentem lá na minha postagem,porque estou muito feliz de poder participar de uma equipe tão divertida! LINK:aqui
Mais um aviso para vocês,vou ficar online no blog de extras essa semana que se inicia ok? Cliquem  no nosso menu EXTRAS que você será redirecionado para o blog....Hey galera,vocês conhecem o menu Bars? Eu o conheci ontem enquanto dava minha visitinha diária no Adolescente Nerd,e me encantei por ele,acho até que vou usar em algum layout!
 preview aqui (www)

Primeiro iremos usar o famoso código:
Clique na seta e cole acima de ]]></b:skin>:

oi ii {
background:#transparent;
list-style: none;
height: 44px;
float:left;
padding:10px 5px;
}
oi ii a {
width: 130px;
height: 40px;
line-height: 53px;
border-bottom: 4px solid #999;
padding:0px;
color: #fff;
font-size:18px;
font-weight:lighter;
text-align:center;
text-decoration: none;
display: block;
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;
}
ii:nth-child(1) a {
border-color: #99e677;
}
ii:nth-child(2) a {
border-color: #ff6e9a;
}
ii:nth-child(3) a {
border-color: #c3e1f1;
}
li:nth-child(4) a {
border-color: #99999;
}
ii:nth-child(5) a {
border-color: #fdff7a;
}
ii:nth-child(1) a:hover {
border-bottom: 7px solid #86872f;
height: 7px;
}
ii:nth-child(2) a:hover {
border-bottom: 7px solid #eb4d7a;
height: 7px;
}
ii:nth-child(3) a:hover {
border-bottom: 7px solid #80bcd5;
height: 7px;
}
ii:nth-child(4) a:hover {
border-bottom: 7px solid #000;
height: 7px;
}
ii:nth-child(5) a:hover {
border-bottom: 7px solid #d99900;
height: 7px;
}
.position {margin-top: NÚMEROpx; margin-left: NÚMEROpx;}

Entendendo os código: Mude as partes em negrito de acordo com essa tabela de cores (www). A parte .position é a parte que vai definir a posição do menu, então mude o valor de “Número” pelo valor que você quer ate que o menu fique do seu gosto.

Outra coisa importante: Se quiserem colocar mais de 5 links no menu vocês terão que criar mais class de ii:nth-child, reparem que os ii:nth-child acima tem um pra cada link, são 5 links então são 5 ii:nth-child, se quiserem colocar mais links no menu vocês terão que criar o ii:nth-child (6) e por ai vai. É fácil, só acrescentar.

E cole em um HTML / Javascript:


<div class="position"><oi id="nav">
<ii class="LINK"><a href="#">Home</a></ii>
<ii class="LINK"><a href="#">Ask me</a></ii>
<ii class="LINK"><a href="#">Tumblr</a></ii>
<ii class="LINK"><a href="#">About me</a></ii>
<ii class="LINK"><a href="#">Textos</a></ii>
</oi></div>
PRONTINHO,seu menu já esta-rá lindo no seu blog,lembrando que o blog que adaptou esse menu do tumblr para o blogger foi o Adolescente Nerd

4 comentários:

  1. OMG, se aquela porcaria de modelo Janela alguma coisa funcionasse os códigos, eu usava esse menu, sem dúvidas *OO* É muito lindo, adorei ♥

    Nossa, tu é sortudo mesmo em postar no PoY, a Raku é diva demais ♥ À propósito, obrigada por seguir meu blog, seu divo, estou retribuindo :D

    Beijos,

    Juu-Chan do Nescau com Nutella.

    ResponderExcluir
    Respostas
    1. Esse menu é mesmo lindu né???

      A sim,o PoY é maravilhoso,e a Raku tbm!!!

      Claro que segui seu blog,ele é lindo fazer o que né?

      Excluir
  2. Adorei este menu, vou usar no layout que estou fazendo! *^*
    Nem sabia que ele existia, me ajudou bastante ;3

    ResponderExcluir
    Respostas
    1. Sim ele é linndooouu,TAMBÉM vou usar ele *..*

      Excluir