• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

8 de junho de 2013

* Menu Bars

Um ótimo site com vídeos aula (www)
Essa imagem é perfeita
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)



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>

Bem, eu peguei esse tutorial de um tumblr, mais testei em meu blog testes com algumas mudanças e deu certinho, espero que consigam fazer :)
E me desculpem pela ausência de posts! até mais gente!



34 comentários:

  1. Ah, ja usei esse menu, ele é muito fofo *---*,

    ResponderExcluir
    Respostas
    1. Poderia postar um tuto de como fazer um fundo assim no blog?

      Excluir
  2. Ahhh! Vou usar em uma encomenda que me pediram, brigadããão!!!


    teen-bombs.blogspot.com | fb.com/cacadoresdereases

    ResponderExcluir
  3. VOU USAR COM CERTEZA!!!

    teen--explosion.blogspot.com

    ResponderExcluir
  4. Adorei esse menu, que perfeito ;3
    xoxo,

    ResponderExcluir
  5. O menu é bonito, e ocupa bem pouco espaço. Fica bem fofo, se colocar um cabeçalho com o espaço adequado a ele.

    *Desculpa a falta. Distanciei-me um pouco.*

    Thing HTML

    ResponderExcluir
  6. O menu é lindo *-* O tutorial está bem explicado, acho que se eu fizer algo bem colorido da próxima, usarei esse menu *u* Posso?

    ResponderExcluir
  7. Adorei o menu, quem sabe eu não use no meu próximo layout ^^
    Pequena Garota

    ResponderExcluir
  8. Achei bem fofo o menu, mas acho que para layouts delicados poderíamos diminuí-lo ou, usar tons bem clarinhos. Mas com uma boa combinação fica diwo!

    ResponderExcluir
  9. Olá linda. amei seu blog To seguindo com certeza
    www.rg-girls.blogspot.com

    ResponderExcluir
  10. gostei do tutorial, se der eu vou usar.
    meu blog: blogjulietanoavesso.blogspot.com

    Beijinhos.

    ResponderExcluir
  11. Awwn, que bonitinho! Fica super legal o efeito! *u*
    Beijos
    Purple Star

    ResponderExcluir
  12. Adorei o menu :3 muito sexy ele kkkkkkkkkkkkkkk

    XOXO:D
    jovenclube(.blogspot.com.br)

    ResponderExcluir
  13. Bem fofo o menu, quanto tempo não visito o AN çç'

    ResponderExcluir
  14. Que bonitinho *--*
    O banner com o nome do menu também tá super fofo, melhor que os meus rçrç
    Beijoos!

    Caramelos Encantados

    ResponderExcluir
  15. Esse menu é bem fofinho c:

    Ps: O post sobre como afinar o seu violão foi excluído? Não consegui encontrar ele :/

    Beijos

    ResponderExcluir
  16. Que menu diferente, é fofo *-*

    Beijos ~
    garotas-cupcakes

    ResponderExcluir
  17. Cara, ai você posta depois que eu termino o layout do meu blog! Estou indignada, tô babando esse menu, ele é lindo, diferente mas lindo! Sem dúvidas irei usar no meu próximo lay c;

    Deixei um selinho pra você flor(vi que aceitava) ^^
    http://vaonamala0ficial.blogspot.com.br/2013/06/selinho-blog-versatil.html

    ResponderExcluir
    Respostas
    1. Ah, posto assim que puder, desculpa a demora, estava ausente esses dias, psé KK'

      Excluir
  18. Awn, que menu lindo, mel déuz! Já readicionei o AN na elite, desculpa não ter respondido antes ;)

    Beijos ;* • Eu Amo HTML • {euamohtml.blogspot.com}

    ResponderExcluir
  19. Esse menu é mesmo muito fofo, quase usei ele no meu tema atual, se quiser conferir o novo layout dá uma passadinha lá >.<

    Garota No Mundo Html

    ResponderExcluir
  20. Tentei fazer mais não deu certo, flor como faço para ele ficar acima do meu banner? me ajuda? www.meninascapricho-dada.blogspot.com

    ResponderExcluir
    Respostas
    1. altere o .position {margin-top: NÚMEROpx; margin-left: NÚMEROpx;}

      Excluir
  21. Fotografia : SOLENNE.J. ART los CREDITOS !!!!!!!!!!!!!!!
    http://solennejart.fr

    ResponderExcluir