* Menu Bars

Adolescente Nerd

Olá cerejas!

Poxa mais que saudade de postar aqui, fiquei muito tempo fora né?! até postei um aviso falando que depois teríamos postagens, desculpem-me, esses lances escolares...

Ah mais espero que vocês estejam bem, eu estou, ontem só tive aula de história já que os outros professores foram ao campeonato de futebol escolar, e quase toda minha sala participou, mais saiu o resultado ontem que minha turma não ganhou, foi vice kkkk

Bem, já que eu, infelizmente não estou com muito tempo para fazer o post, estou aqui só rapidex, então vamos logo ao assunto do post né. Hoje irei ensinar a fazer um menu super legal para colocar no cabeçalho do blog, é o menu Bars, preview aqui (www). 

créditos // créditos

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>

- See more at: http://adolescentenerd.blogspot.com.br/2013/06/menu-bars.html#sthash.ib9uNMqG.dpuf