Menu horizontal com submenu e caixa de busca

Dicas, Layout
75
Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

O seguinte menu é feito unicamente com CSS, é um menu horizontal com sub-menu, e do lado direito tem uma caixa de busca. É um menu prático para os que não querem lidar com menus muito complexos ou preferem não usar um que requer scripts para funcionar ou que tenha muitas imagens.

✅ Canal no Youtube | Inscreva-se AGORA ✅

A instalação e personalização é bastante simples, e é bastante funcional, já que tendo a caixa de busca integrada você terá dois elementos em uma mesma área.

menu

Recomendamos que crie um blog para testar se será compatível com o seu Template e não acontecerá conflitos, antes de aplicar em seu Blog principal. Faça backup de TUDO!

Passos para instalar o menu

Vá em design >> Editar HTML >> Expandir modelos de widgets.
Copie o código abaixo e coloque-o antes de ]]>

/* Menu horizontal com buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Tamanho do menu */
height:40px;
padding-left:14px;
background:#444; /* Cor de fundo */
border-radius:5px; /* Bordas aredondadas */
}
.menu {
width: 100%;
float: left;
font-family:"Arial", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:14px; /* Tamanho da fonte */
font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 5px 5px; /* Bordas aredondadas do sub-menu */
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
border-right: 1px solid #666;
color:#cccccc; /* Color de la fuente */
display:block;text-transform:uppercase;
font-weight:normal;
line-height:40px;
margin:0px;
padding:0px 25px; /* Espaço entre cada casa */
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #2580a2; /* Cor das casas ao passar o cursor */
color:#FFFFFF; /* Cor do texto ao passar o cursor */
text-decoration:none;
}
.menu li ul {
background:#333333; /* Cor de fundo do sub-menu */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Tamanho do sub-menu */
z-index:100;
border-top:1px solid #fff; /* Borda superior do sub-menu */
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
border-radius: 0px 0px 5px 5px; /* Borda das sub-casas */
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2; /* Cor das sub-casas ao passar o cursor */
color:#ffffff;
text-decoration:none;
}

#search {
width: 228px; /* Tamanho da caixa de busca */
height: 24px;
float: right;
text-align: center;
margin-top: 8px;
margin-right: 6px;
background: #fff;/* Cor de fundo da caixa de busca */
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Vá até ‘design’ → ‘Elementos de página’ → Clique em ‘Adicionar um elemento de página’→ Escolha tipo ‘HTML/Javascript’ e cole o seguinte código:

<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href="URL">Home</a></li>
<li><a href="#">Casa 2</a>
<ul>
<li><a href="URL">Casa 2.1</a></li>
<li><a href="URL">Casa 2.2</a></li>
<li><a href="URL">Casa 2.3</a></li>
<li><a href="URL">Casa 2.4</a></li>
</ul>
</li>
<li><a href="#">Casa 3</a>
<ul>
<li><a href="URL">Casa 3.1</a></li>
<li><a href="URL">Casa 3.2</a></li>
<li><a href="URL">Casa 3.3</a></li>
<li><a href="URL">Casa 3.4</a></li>
</ul>
</li>
<li><a href="#">Casa 4</a>
<ul>
<li><a href="URL">Casa 4.1</a></li>
<li><a href="URL">Casa 4.2</a></li>
<li><a href="URL">Casa 4.3</a></li>
<li><a href="URL">Casa 4.4</a></li>
</ul>
</li>
</ul>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>
</div></div>

Adicione as URLS onde indicado, bem como o nome da casa. Isso tem que ser feito manualmente.

No primeiro código estão as áreas que podem ser personalizadas, como a cor de fundo, fonte, tamanho e etc.

O desenho arredondado de todo o menu também é puro CSS, portanto se você estiver usando um navegador antigo você não verá essas bordas.

.

75 Comentários

  2. Outra pergunta;

    se eu tiver criado as páginas pelo blogger com o widget abas, eu devo colocar para “nao mostrar” na edicao de páginas? Por que se nao havera conflitos estou errado?

    Responder

    • AE Marlon Bruno:
      Não fasço parte deste blog mais gostei do menu com caixa de busca alem de ser bem simples:
      olhei sua pergunta e fui testar o menu no blog aconteceu o que vç disse.
      e já consegui resolve:veja?
      Para resolver não precisa apagar. “tabs-outer”
      primeiro – instale normal como citado acima o estilo do menu que é o 1º passo.
      segundo – na hora de instalar os Elementos de página do menu que é os links.Vá em design >> Editar HTML >> não precisa .Expandir modelos de widgets.

      Caso queira o menu abaixo do cabeçalho procure e cole o codigo logo abaixo:

      Caso queira o menu acima do cabeçalho procure e cole o codigo logo acima desta tag:

      agora o 3º passo Vá até ‘design’ → ‘Elementos de página’ → Clique em ‘Adicionar um elemento de página’→ Escolha tipo ‘HTML/Javascript’ e cole
      o codigo do menu normalmente: salve e veja:espero ter ajudado

      Responder

  7. Parceiro;

    dei um ctrlf e achei 5 deste elemento. Tentei remover o que esta logo acima do mas deu uma mensagem de erro e nao pude salvar, tive que recolocar o elemento novamente. Se devo remover o elemento que voce falou entao qual deles?

    Responder

  8. Parceiro;

    veja que estranho: para quem já tem dois gadgets superiores (cabecalho e paginas)nao conseguimos add um novo java. Mas se excluirmos o páginas conseguimos entao add o novo gadget e posteriormente habilitar o paginas, como eu tinha falado com voce láááá em cima.

    Pois bem. Estranhamente resolvi fazer um teste: exclui o cabecalho e addo paginas e o novo java E DEU. Estou fazendo alguns testes, veja como esta la no blog de teste.

    Responder

  10. Acabei de fazer um mudança: posicionei o java menu em cima e o cabecalho em baixo, aí funciona. A questao é: porque que o cabecalho por cima o menu nao funciona? …..

    Responder

  13. Olá Marlon, que ótimo tutorial! Adorei a dica… vou fazer uns testes lá no meu blog!
    Mas vem cá, como eu faço para adicionar mais casas e sub-casas (categorias e sub categorias) no menu? É fácil?

    Responder

  14. Marlon, outra dúvida… essa barra de menu horizontal acaba aparecendo desconfigurada no explorar! Estranho isso… pq no chrome e firefox tá tudo certinho! Tem algum jeito de arrumar?

    Responder

  15. Ótimo post.. so que quando eu colocava o código do menu em HTML/Javascript dava erro, ai eu coloquei depois de pra ficar em baixo do cabeçalho e dei um
    pra nao ficar colado !
    Gostei muito, tava procurando menu com busca ;D

    Responder

  16. porque quando coloco o menu no topo do blog so aparece a caixa de buscar? não aparece os nomes “casa” os links que deveriam aparecer, so aperece se colocar abaixo das postagens ou ao lado, por favor responde urgente.

    Responder

  17. Olá, no meu blog de teste eu criei porém aparece o fundo mas sem os botões, eu li um comentário que era sobre um tal de “tabs-outer” mas eu encontrei dois e ao removê-los da erro. Pode me ajudar?

    Responder

  19. Olá Kemuel, eu eliminei as tabs mas como não deu certo coloquei de novo, mudei o modelo do meu blog e consegui que aparecesse as letras do menu, mas o submenu ficou abrindo de lado, já tentei mudar o tamanho para ele ficar do mesmo modo que o seu mas não consegui, por acaso tem alguma dica. Não me importo que fique de lado desde que um não fique por cima do outro. Testei nos diferentes modelos do blog e alguns dão certo e outros não, acredito que seja a configuração de cada modelo. Desde já agradeço.

    Responder

  23. Gostaria de inserir um botão de “pesquisar” ao lado da caixa de busca, ao invés de apenas deixar o leitor perceber que basta teclar Enter para acionar a função. É possível nesse modelo?

    Responder

  24. O menu tbm não aparece em meu blog. O que você ensinou é muito interessante, mas se torna péssimo pelo fato de você, o autor, não dar nenhum tipo de resposta exata de como resolver o problema.

    Responder

  32. Olá amigo, beleza.

    No meu deu certinho, só que eu estou tentando mudar, ao inves de ficar com esse modelo, ficasse com o modelo do meu blog.

    Bem, eu criei o template no Artisteer, lá ele mostra os menus, submenus. Tudo certo, já tentei procurar no código html do blog pelo nome do menu tipo: (início), (contato), etc. Mas não deu certo. só consigo colocar os menus atraves de paginas do blog, mas os submenus nãp consigo.

    Se puder me ajudar agradeço.

    Responder

  33. Eu, como o outro no outro comentario, também não consegui achar essa parte “Vá em design >> Editar HTML >> Expandir modelos de widgets”.

    Você mandou ir : “Vá em Modelo clique em >> Editar HTML >> e depois clique em Expandir modelos de widgets”.
    Deposi de fazer isso cola o código onde??? Faz o que?

    Responder

  34. Oi boa tarde
    coloquei esse menu em meu blog
    http://www.estiloblitz.com/

    mas como coloquei no lugar da navbar ele não funciona as subpáginas, optei por deixar somente as páginas, mas a caixa de pesquisa voltou para a esquerda. Queria que ficasse no lado direito igual ao original. Ja tentei mexer nas margim, mas não deu certo. Pode me ajudar?

    Responder

    • alguém pode me ajudar, to precisando bem rápido meu blog já esta pronto só falta esse menu, mais ele só consegue introduzir apenas 5 menu principal, apartir do 6º eles vão para o submenu do 5º

      Responder

  39. Em um template antigo consegui sem problemas… Mas no “Simple” não aparece o nome das casas… Você poderia me dar uma breve explicação sobre como remover a tal tabs-outer??

    Responder

  44. Muito bom esse código, é uma forma inteligente de ter tudo no blog sem fazer bagunça. Mas eu queria saber se é possível centralizar , porque os links ficam todos pra esquerda.

    Abraços,
    Obrigada.

    Responder

  46. Não está entrando as letras na Barra de menus.
    O que pode ter acontecido? Ao meu ver estou fazendo tudo certinho, aonde errei será?
    Aparece só a barra roxa e a caixa de busca.

    Responder

  47. Me ajude alguem! Nao aparece a barra de menu(aquela que está escrito NOVA POSTAGEM,DESIGN, COMPARTILHAR…) nao sei pq nao aparece! Só o que eu sei é que baixai um Photoshop e deis que baixei nao aparece a tal barra! Me ajude por favor! E mais uma coisa para ajudar só consigo entrar no meu blog no notebook da minha mae!
    AJUDA,AJUDA!!!
    ♥May♥

    Responder

  48. Olá! Eu coloquei ele no meu blog, pegou normalmente obrigada! Agora a unica coisa que não consegui foi diminuir o tamanho da caixa de texto… essa que está azul no seu, Como faço para diminuir?

    Responder

  50. Olá. Eu apliquei esse método no meu blog, porém quando eu posiciono o gadget para baixo do cabeçalho o fica uma tarja sem nada, sem menu, sem submenu. O mesmo não acontece quando posiciono o gadget acima das postagens, quando posiciono ali (acima das postagens) fica funcionando direitinho.
    Em termos de designer fica feio eu manter o menu acima das postagens, o certo e mais bonito é abaixo do cabeçalho. rs*
    Pode me ajudar a solucionar esse probleminha?
    Desde já, obrigada! 🙂

    Responder

      • Obrigada aos adm. do blog por me responder.
        Eu fiz o que foi proposto, porém sem sucesso. Sem sucesso, não… O código de vocês funciona perfeitamente, eu estou até usando-o agora. Porém o problema persiste quando eu coloco o gadget no espaço abaixo do cabeçalho. Coisa que não acontece quando posiciono acima do espaço das postagens, então estou usando desse modo mesmo. Apesar de visualmente não ser tão agradável, está funcionando. É um adianto. Creio que o problema seja o meu template, ele é meio velho, meio passado. Tá tudo bem, porque meu blog ainda é uma ideia, tem muito o que mudar mesmo. rs*
        Mais uma vez, obrigada!

        Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.