Menu fixo responsivo com caixa de pesquisa

A navegação em um blog é uma coisa muito importante, ter um menu que se adapte aos mais variados tipos de tela é sme dúvida, algo muito importante.

Um menu fixo, que é responsivo e que apresenta uma caixa de pesquisa é sem dúvida um diferencial que vai agradar a todos os seus leitores.
Aprenda a como aplicar este menu ao seu blog lendo este tutorial.

1 Vá em Modelo > Editar HTML > Clique na caixa de códigos > Aperte Ctrl + F ou F3 > Procure por <body> > Cole o seguinte código abaixo:
2 Faça as alterações de nomes e links

3 Para adicionar uma aba, cole o seguinte código antes do último </ul>
<li><a href='#'>ABA</a></li>

4 Para adicionar uma aba com subabas, cole o seguinte código:
<li><a>ABA COM SUBABAS</a>
<ul class='menus'>
<li><a href='#'>SUBABA</a></li>
<li><a href='#'>SUBABA</a></li>
<li><a href='#'>SUBABA</a></li>
<li><a href='#'>SUBABA</a></li>
</ul>
</li>

5 Procure por ]]></b:skin> > Acima cole:
6 Fala as alterações necessárias e salve.
Compartilhe no Facebook
Compartilhe no Twitter
Compartilhe no Google+

63 comentários, comente também!

  1. Adorei o tutorial, vou colocar o menu no meu próximo layout :)
    Cat Girl

    ResponderExcluir
    Respostas
    1. Que bom que gostou, fico feliz que vai colocar ><

      Excluir
  2. Eu gostei desse menu fica muito bonitinho!
    Cara parabéns pelo lay tá incrível !Sério!! Tá divino !
    Parabéns suas criações são incríveis!

    ResponderExcluir
    Respostas
    1. Muito Obrigado! Que bom que gostou <3

      Excluir
  3. EU ACHO QUE VOU CHORAR, QUANDO ENTREI NO BLOG E VI A CLARICE EU TIVE UM ATAQUE, MDS, SOCOORRRROOOOOOOOOOOOOOOOOOO -q

    O menu é foda *0*, já salvei aqui nos favoritos B|

    ResponderExcluir
  4. Nossa, eu estava doida nesse tuto! Eu tô realmente apaixonada nesse layout da Clarice ♥ Mesmo não sendo fã, eu amei, achei muito bonito!

    http://theluxurybeats.blogspot.com/

    ResponderExcluir
    Respostas
    1. Que bom que achou o tuto e que gostou do blog, obrigado!

      Excluir
  5. Eu sempre quis saber como se fazia esse menu, obrigada por postar ^^

    {euamohtml.blogspot.com}

    ResponderExcluir
    Respostas
    1. Eu também sempre queria saber como fazer, então decidi procurar e fiz um :v . Que bom que voltou, tava com saudades de você s2

      Excluir
  6. Obrigada pelo tutorial. Estou a mudar o design do meu blog e andava a perguntar-me como se faz este menu. :)

    Já agora, vocês têm FB ou Twitter para poder ir acompanhando as vossas actualizações?

    ResponderExcluir
    Respostas
    1. Que bom que gostou, espero que tenha ficado legal no seu blog :3 Os links para redes sociais estão na sidebar ^^

      Excluir
  7. Tava mesmo precisando, to fazendo um lay novo e queria colocar a caixa de pesquisa no menu *-*

    ResponderExcluir
  8. Oi, você poderia me ajudar? Gostaria de saber onde tenho que modificar para o texto, assim como a caixa, ficar no centro do menu.

    ResponderExcluir
    Respostas
    1. bem, se você quiser um menu como o blog tá agora(centralizado), eu não vou ter como ajudar por aqui porque eu modifiquei o código. Mas se quer apenas o texto, bota um < center > < / center> (sem espaços) entre os seus link, talvez funcione.

      Excluir
  9. Oi, tudo bem?
    Tenho uma dúvida: nesse menu, dá para colocá-lo descendo junto com a barra de rolagem? Como se ficasse fixo no topo mesmo, com o seu?
    Beijos <3

    ResponderExcluir
    Respostas
    1. Atualizei o tutorial e agora ele funciona direitinho, os códigos estão até menores, espero ter ajudado!

      Excluir
    2. Oi, Alan!
      Então... aqui não pegou! hahahaha Esse seu tutorial é o único que funciona no meu layout, ele formata direitinho o menu, o único problema é que ele não rola junto, não fica fixo, sabe? :( Você pode me ajudar?

      Excluir
    3. Hum, veja se na parte do css, no primeiro código #NavbarMenu { tem position: fixed; z-index: 9999;. Você também pode tentar excluir todo o menu(HTML e CSS) e dai tentar colocar ele de novo. Se não funcionar, entre em contato de novo :3

      Excluir
  10. Uma dica: Para centralizar os links, é preciso colocar este código:

    border-left: 200px solid #CD6090; /* Tamanho e cor da borda - não retire pois ela centraliza o menu */


    Abaixo da parte que está definindo a cor do background do menu.
    É preciso colocar a mesma cor do background do menu nesse código.

    Exemplo, se seu background é #FFFFFF no código que passei também coloque esta cor.

    Fiz isso e deu certo no meu.

    ResponderExcluir
    Respostas
    1. oooooooobrigada sua linda, finalmente consegui centralizar!

      Excluir
    2. Com a postagem atualizada, o menu fica centralizado automaticamente!

      Excluir
  11. vamos fazer parceria beijos e obg ...http://a-culpa-e-suaee.blogspot.com.br/

    ResponderExcluir
  12. Obrigado! Vc me salvou! ♥

    ResponderExcluir
  13. Respostas
    1. O que exatamente você não conseguiu? Algum erro no código?

      Excluir
  14. Anônimo20/12/14

    Adorei! Mas como eu poderia tirar a caixinha de pesquisa?

    ResponderExcluir
  15. Adorei! Usei no meu blog! Obrigada!

    ResponderExcluir
  16. Mds, como eu amo esse blog!!!
    A maioria dos tutoriais que eu uso no meu blog são só indicados por você. Você é demais, obrigado!

    ResponderExcluir
  17. Me ajudou muito até que enfim depois de varios tutoriais desse menu esse foi o unico que deu certo! Ameiii ♥

    ResponderExcluir
  18. Amei o tuto, muito obrigada

    ResponderExcluir
  19. olá, você pode me ajudar?Eu queria colocar borda nesse menu. Eu já adicionei o código border-dottom:1px dashed #FF69B4, mas ele não funciona, o que eu faço?
    http://cute-universe.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Bem, um dos possíveis problemas de não estar funcionando é que o código que você escreveu está errado. O certo seria:
      border-bottom:1px dashed #FF69B4;
      Caso o problema continue, entre em contato de novo! ^^

      Excluir
  20. Finalmente um código que funcionou perfeitamente! Muito obrigada por disponibilizar!
    Zona de Conspiração

    ResponderExcluir
  21. Não entendi... o código cadê é invisível??? ou isso é brincadeira??? o pessoa ver e eu não!! sacanagem pura!!

    ResponderExcluir
    Respostas
    1. Na postagem tem o link para os dois códigos, é apenas clica em 'este código' que está destacado. É um link, não coloquei ele na postagem pois era muito grande.

      Excluir
  22. Olá. Você dizer como inserir ícones de redes sociais alinhados à direita, antes da caixa de pesquisa? Obrigada desde já.

    ResponderExcluir
  23. Heey!
    Bem, eu utilizei o código no meu blog de teste, porém quando eu vou digitar na caixa de pesquisa, não aparece o texto.
    Isso acontece somente comigo?

    ResponderExcluir
    Respostas
    1. Bem, isso não era para acontecer, eu vou tentar resolver o problema, fique de olho na postagem durante essa semana, qualquer coisa eu atualizo!

      Excluir
  24. Oi, adorei o tutorial <3
    Só uma dúvida: se eu quisesse que o menu não descesse conforme eu rolo a página, como eu teria que fazer?
    Um beijo e desculpa e incomodar, mas não encontrei em nenhum lugar a resposta pra minha dúvida =(

    ResponderExcluir
    Respostas
    1. Consegui com o seu código! Queria saber se posso publicá-lo no meu blog, com as modificações que eu fiz, mas dando os créditos a você e fazendo uma chamadinha de divulgação do seu blog <3

      Um beijo!

      Excluir
    2. Claro que pode! ^^

      Excluir
  25. A imagem não está aparecendo :c

    ResponderExcluir
  26. Ajudem-me! Eu fiz tudo como descrito, mas olha o que aconteceu no meu blog: http://ageekgirlsblog.blogspot.pt/

    Como resolvo isso? URGENTE!

    ResponderExcluir
  27. Me desculpa, finalmente consegui! Mas obrigada na mesma :)

    ResponderExcluir
  28. Olá! Não consigo visualizar a imagem :( helpp

    ResponderExcluir
  29. eu não achei aquele ]]> que você colocou

    ResponderExcluir
    Respostas
    1. Clique na caixa de códigos, aperte Ctrl + F ou F3 e procure pelo código novamente.

      Excluir
  30. Olá, eu gostei muito do tutorial porque me ajudou, mais houve um problema, fica uma lista preta descendo junto embaixo do menu, o que eu faço?

    ResponderExcluir
    Respostas
    1. Tente ver se não cometeu nenhum erro na hora de realizar o tutorial, ou se não esqueceu de aplicar o CSS.

      Excluir
  31. Oi! Obrigada pelo tutorial...

    Funcionou direitinho, mas preciso saber como dar espaço em um link e outro, ficou tudo colado :/

    Beijos!

    ResponderExcluir
    Respostas
    1. Obrigado por utilizar um de nossos tutoriais!

      Na linha " menu a { " coloque margin-right: VALORpx
      Em valor coloque a distância que preferir!

      Excluir
  32. Não conseguir fazer ... o menu nao ficou fixado bem no blog ... poderia dar uma olhada ?
    www.filmeseseriespower.com

    ResponderExcluir
    Respostas
    1. Como assim ele não fica bem fixado no blog?

      Excluir
  33. eu nao consegui=/ fica o texto todo aparecendo qd visualizo só consegui a parte dos links msm=/ oq sera?

    ResponderExcluir
    Respostas
    1. Veja se não teve nenhum erro na parte de colocar o CSS, como local, talvez alguma parte faltando...

      Excluir
  34. Então, eu apaguei a parte que você pediu la em cima, e mesmo seguindo todos os passos, não fico com o menu fixo. Pior, que apaguei e esqueci de abrir os >...< pra copiar junto, e agora perdi ;s

    ResponderExcluir
    Respostas
    1. Oie!
      A parte que eu disse que era pra apagar não é/era obrigatório. Apenas se você não quer a caixa de pesquisa você apaga, mas do mesmo jeito deixei a parte que era pra apagar, caso queira, destacado em laranja.
      Eu revisei o código e não achei nenhum erro que impedisse que ele ficasse fixo no topo do blog, eu posso testar em alguma outra hora para conferir se não tem nada de errado mesmo.
      Reveja se copiou todo o CSS corretamente ou se não tem algum outro código com o nome menu que pode estar em conflito com o código deste tutorial! Caso tenha, coloque um número 1 do lado do código menu em todos os 'menus' que tem nesse código.

      Obrigado por usar um dos nossos tutoriais, fico muito feliz. Espero que tenha ajudado, qualquer dúvida entre em contato novamente! <3

      Excluir
  35. Adorei! Muito obrigada! https://brilhamulher.blogspot.com.br/

    ResponderExcluir
  36. Amei o menu! Obrigada <3
    http://heybrina.blogspot.com.br/

    ResponderExcluir
  37. Muito Bom eu coloquei no euamoitapema.com parabéns pelo tutorial 💜

    ResponderExcluir

• Peça tutoriais em 'Contato'
• Comente com o link do seu blog para que eu posso visita-lo
• Você pode usar as Tags negrito, itálico, links...

Créditos



O Projeto Aurora foi criado completamente, com tutoriais disponíveis no blog, por mim, Alan Felipe Jantz.

Para as postagens 'reblogadas', os créditos do local de origem dos tutoriais está no final da postagem.

Todos os ícones utilizados neste template foram pegos no flaticon.com, todos os direitos reservados para os autores dos mesmos.





Algo que é seu está aqui, mas não foi creditado?
Entre em contato clicando na aba 'Contato' do menu para receber seus créditos!
BouquetNOVO
The Only ExceptionNOVO
Wide AwakeNOVO
Simple BaseNOVO
NatureNOVO
Why so Pink?NOVO
Why So Blue?NOVO