Tutorial: Menu Horizontal Simples

Hey gente, aqui é a Paula!
Bem, como prometi hoje vou ensinar a fazer um menu igual esse aqui do blog. Peguei esse tutorial no Trechy Teen, no caso vocês irão usar o banner como fundo do menu, é bem fácil e você pode optar pela cor e tudo mais:
Procure por: /* Navigation Menu caso tenha usado o tutorial anterior e por: 
.Header .description {
font-size: 130%;
}
se for seu layout comum, agora apague todo esse código:

/* Navigation Menu

------------------------------------------------------*/

#NavbarMenu {
background:url(http://4.bp.blogspot.com/_xpQK9GsnDPs/TO2TrnS5yRI/AAAAAAAAAn0/uv3et7J0nm0/s000/navhappyday.png) no-repeat;
width: 890px;
height: 58px;
font-size: 14px;
color: #FFF;
font-weight: bold;
margin: 0 auto 10px;
padding:0px;
}

#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
font-weight: bold;
text-transform: uppercase;
margin: 0;
padding: 12px 15px 7px;
}
#nav li a:hover, #nav li a:active {
margin: 0;
padding: 12px 15px 6px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #C5EAf7;
width: 150px;
color: #FFF;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #e87e93;
color: #FFF;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;

}

Substitua por esse:
/* Pagelist
-----------------------------------------------*/
#PageList1 {
float:left;
font:14px arial;
margin-top:10px;
margin-left:200px;
width:700px;
color:#FF8C00;
}
.PageList li a {
color:#ffffff;
font-weight:bold;
padding:10px 10px;
text-shadow:0 1px 0 ;
}
.PageList li a:hover{
color:#8B5C8E;
font-weight:bold;
text-shadow:0 1px 0 ;
text-decoration:none;
}
.crosscol .PageList li, .footer .PageList li {
background:none repeat scroll 0 0 transparent;
float:left;
list-style:none outside none;
margin:0;
padding:10px 0;
}
.PageList li.selected a {
color:#C71585;
font-weight:bold;
text-decoration:none;
}
.PageList li.selected a:hover {
color:#FFF8DC;
font-weight:bold;
text-decoration:none;
}
margin-top:10px; - para o menu subir ou descer
margin-left:200px; - para direita e para esquerda 

Postagem Relacionadas

54 Comentários

  1. que legal!! Adoreii! :D <3

    beijos beijos

    ResponderExcluir
  2. Valeu a dica, adorei. :D

    http://nahboaoi.blogspot.com.br/

    ResponderExcluir
  3. Eu nuca consigo fazer esse menu rs
    Gatinha estou atualizando o meu canal no youtube com vídeos semanais, visite e se gostar se inscreva, beijinhos.
    Canal: https://www.youtube.com/user/isabelyrogrigues
    Blog: http://fasesdegarota.blogspot.com.br/

    ResponderExcluir
  4. Eu vi seu blog agora e me encantei, serio, OLHA O SEU DESIGN *-* é perfeito e olha o seu conteúdo, gente, perfeito!

    gamei no seu blog e muito boa a dica.
    http://pensamentosdecoelho.blogspot.com.br/

    ResponderExcluir
  5. Muito bom o tutorial, anotei tudo e vou tentar fazer!

    http://newsdayoff.blogspot.com.br/

    ResponderExcluir
  6. Acho lindo mesmo seu menu. <33
    Beijos, beijos!

    DearItGirl.blogspot.com.br

    ResponderExcluir
  7. Para mim que não consigo nunca me dar bem com isso... ahah
    Mas a dica é boa!
    Beijo querida
    http://byschmith.blogspot.pt/2013/09/voltando-atras-no-tempo.html

    ResponderExcluir
  8. Nunca me dou bem com HTML , mais ok UHSAUHSUAHSAUHS'

    Beijos , Deus abençoe <3'
    mundodasgarotasforever.blogspot.com.br

    ResponderExcluir
  9. adorei, sempre quiz fazer. obg. bjs

    ResponderExcluir
  10. Que legal, vou guardar p/ quem sabe futuramente eu pense em fazer no meu blog!
    Beijão, beauty-habits.blogspot.com.br

    ResponderExcluir
  11. Que legal!!
    beijinhos, Rê
    http://garotas-urbanas.com/

    ResponderExcluir
  12. Uma maravilha esse tutorial, especialmente para pessoas como eu, que não sabem NADA de html!

    ResponderExcluir
  13. Ótima dica Paula! É sempre útil saber dessas coisas! :D
    Beijocas
    Tô barata, mas tô na moda | Facebook

    ResponderExcluir
  14. Adoooro esse menu, muito cute!!
    super beijo e já seguindo

    Mania de Bruna
    @ManiaDeBruna

    ResponderExcluir
  15. vou ver se isso tb funciona no wordpress! sempre leio os tutoriais e qnd vou ver eh pra blogger! ahahahha

    ResponderExcluir
  16. Ah, que bom que vocÊ postou porque eu passei mesês procurando um tutorial que realmente funcionasse!!
    Beijos
    Batom De Framboesa
    Fique com Deus!

    ResponderExcluir
  17. Estava precisando de um tutorial assim, quero colocar um menun no meu blog.

    http://simpleseagradavel.blogspot.com.br/

    ResponderExcluir
  18. Mue jesus, isso tudo para mim e grego :/ Beijos, Clara do www.nemsanta.com

    ResponderExcluir
  19. Eu adorei o tutorial! Vou mandar pra minha prima, pois ela está começando o blog agora.

    xx,
    www.likeparadise.com.br

    ResponderExcluir
  20. Hummm,muito interessante,belo tuto!
    Beijos

    http://commands-of-my-life.blogspot.com.br/
    http://books-ofmylife.blogspot.com.br/

    ResponderExcluir
  21. ótimo tutorial, flor!

    Esse menu é muito fofo!
    beijos


    http://princessandfashion.wordpress.com

    ResponderExcluir
  22. Adorei o tutorial :D
    Depois vou tentar.

    www.iasmincruz.com

    ResponderExcluir
  23. acho dificil eu fazer essas coisas porque nao levo jeito .. mais adorei e vou tentar . Beijos http://derepente15uiinze.blogspot.com.br/

    ResponderExcluir
  24. Ah muito bom, mas nunca consegui fazer esse menu, no proximo layout vou tentar!
    Bjs

    ResponderExcluir
  25. Adorei, muito, muito, muito útil! Você arrasa ^^

    isabelefarias.blogspot.com.br

    ResponderExcluir
  26. Adoro posts assim.. eu não entendo nada dessas coisas!!
    Já tem post novinho esperando por você!! Muitos beijinhos..

    ➥ www.rolamuito.com

    ResponderExcluir
  27. Adorei o tutorial, o menu é lindo. Já tinha procurado algo relacionado para por no meu layout, mas não tinha achado nada que me agradasse. Beijos, Light As The Breeze

    ResponderExcluir
  28. Que bacana, ótima dica Flor!
    Boa semana!
    Fica com Deus!
    Beijo!

    http://nannacunha.blogspot.com.br

    ResponderExcluir
  29. Sou doida por esse menu, vou começar a fazer um layout novo e vou coloca-lo
    beijos

    ResponderExcluir
  30. Quanto tempo sem comentar aqui em Paula *-*
    Estava precisando deste tutorial ,acho que vou usar no meu próximo layout .Bjs

    blog-sempre-teen.blogspot.com

    ResponderExcluir
  31. Adorei o tutorial!
    Seu blog é uma graçaaa

    To sorteando uma paleta de 168 cores de sombra la no blog, vem?
    Beijinhos,

    BLOG

    FANPAGE

    ResponderExcluir
  32. Eu acho muito lindo e já tentei colocar no blog,mas nunca dá certo :c

    Beijos.
    Senhorita Imperfeita

    ResponderExcluir
  33. To querend0 colocar um menu no meu blogger, pq nao consigo com o lay atual!! tem como vc me ajudar? Não to conseguindo nem com esse :s

    Bjs
    www.mamaequeroserfashion.com

    ResponderExcluir
  34. Oi Paula!!!!
    O que é esse sue blog?????? AMEI GATA!!!
    Você desenha muito bem e olha que eu amo desenhar, também faço ilustrações!!!
    Que luxo!!!! Estou impressionada como uma garota da sua idade tem tantas habilidades!!A palavra que define o que senti é "encantada"!!
    Belo trabalho, belo blog!!!
    Depois dá uma passadinha no meu blog, estou precisando colocar algo bacana no meu banner, o que me sugere?
    Estou seguindo e curti a fanpage, retribui???
    Beijinhos e boa semana linda!
    http://criscriacoisas.blogspot.cpm.br
    http://wwww.facebook.com/criscriacoisas

    ResponderExcluir
  35. Gosto muito desses tutorias que ajudam com layout do blog, para iniciantes isso ajuda demais.

    http://simpleseagradavel.blogspot.com.br/

    ResponderExcluir
  36. Ótima dica,mas acho que eu fiquei meio perdida KKKKKKK
    ainda bem que é minha prima que faz os layouts haha

    Garotas Comuns

    ResponderExcluir
  37. Aah eu amo esse tutorial. Acho ele uma gracinha. Já usei ele algumas vezes, e acho que ele é tudo. Simplesmente isso. AMEI Paula! E o seu layout continua sendo divo! Hahaha

    Kisses ♥

    - Navy Cupcake

    ResponderExcluir
  38. Flor Paula Adorei o Tuto
    *----* Amo seu Blog ! bem útil!
    Beijinho :*
    O Melhor de Mim

    ResponderExcluir
  39. Eu amo o seu menu!!
    Beijocas, Lili ;3
    Clique aqui, e vá para o blog / Princesa Teen!
    Ask / Fan Page / Twitter - Redes Sociais do blog.

    ResponderExcluir
  40. Adorei a dica,vou tentar no meu próximo layout,que já passou da hora de mudar.

    Beijos

    blogdagi1.blogspot.com.br

    ResponderExcluir
  41. ola paula linda como vai eu adorei o tutorial e a dica , mais eu fico morendo de medo de mexer no meu blog da ultima vez que tentei perdi tudo aff fiz algo erado rsrsrs bjs de http://pramulherlindatododia.blogspot.com.br/

    ResponderExcluir
  42. Tutorial perfeito, Amo seu blog.
    Beijos,
    primeiroseusonho.blogspot.com

    ResponderExcluir
  43. Boa dica, adoro seus tutoriais.

    http://vivendocomodeve.blogspot.com.br/

    ResponderExcluir
  44. ótimo tutorial! :)

    http://www.adolecentro.com/

    ResponderExcluir
  45. Adorei o tuto,é ótimo para quem não entende muito de códigos css e html :)
    Beijos!

    http://www.blogdapaulinka.com/

    ResponderExcluir
  46. Adorei a dica e o menu. *-*

    http://beggar-fashion.blogspot.com.br/

    ResponderExcluir
  47. Bacana! :)

    http://bruh-correa.blogspot.com.br/

    ResponderExcluir
  48. O menu é lindo e obrigada por compartilhar " a receita".

    ResponderExcluir
  49. Oi, tudo bom?
    Amei! São coisas simples como essa que mais
    ajudam a todos na hora de melhorar os blogs! Parabéns!
    Obrigada por prestigiar minha coluna no blog Refúgio das Palavras!
    Tem post novo e promoção!
    Beijão
    Endless Poem

    ResponderExcluir
  50. Eu adorei seu blog, as dicas e tudo mais. Estou seguindo e vou estar sempre por aqui. Ah, e em relação ao post, achei meio complicado de fazer, mas vou tentar. Quero mudar um pouco e o layout daqui é lindo *-*
    Beijos

    marinaalessandra.blogspot.com
    @mariinaale

    ResponderExcluir
  51. Parece ser legal, amei linda *--*

    Ainda lembra de mim, passei muito tempo sem postar no blog, mais tô de volta.

    BLOG: http://tudodiferentecomsamaralima.blogspot.com.br/
    Instagram: instagram.com/samaralima_03

    Beijos ♥

    ResponderExcluir
  52. Adorei o tutorial Paula *-* amo aqui, pq tá lotado de tutoriais e coisinhas super úteis pra fazer um layout bacana, haha

    beijos :*
    guitarrebel.blogspot.pt

    ResponderExcluir

Obrigada!!