Menu com Submenus e Caixa de Pesquisa


Olá e bem vindos!!!
Antes de tudo, muito obrigada a todos os que fazem parte dos mais de 400 amigos :3 Eu fico muito feliz em ter a presença de cada um de vocês aqui e em meu coração<3
Recebi por e-mail e comentários alguns pedidos de tutoriais para fazer um menu como o que uso:
Esse menu é legal porque pode ser adicionado abaixo do cabeçalho e personalizado como se fizesse parte dele, possui submenus e caixa de pesquisa.
Vou mostrar como fiz para vocês, com os estilos que uso, mas caso queiram utilizar os estilos ou visualizar a postagem original, clique aqui: Ciudad Blogger <--Créditos ^-^
Atualização - 13 de junho de 2013: Caso o tutorial não funcione, leia este artigo (em espanhol, de fácil compreensão).
A primeira coisa a ser feita é entrar na área de edição de HTML do seu modelo e salvar um backup; assim caso não goste ou alguma coisa não saia conforme o planejado, basta usar seu modelo sem edições. Feito isso, vamos abrir a edição de html e...
1. Acima de ]]></b:skin>, vamos colar o código que irá personalizar o nosso menu. Deixo aqui o estilo que uso para vocês:
#menuWrapper {
width:100%; /* largura */
height:35px;/* altura */
padding-left:14px;
background:url(URL DA IMAGEM) repeat; /* background */
border-radius:20px; /* Borda arredondada */
box-shadow: 8px 8px 6px #fcc;/* sombra */
}
.menu {
width: 100%;
float: left;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;/* fonte family */
font-size:13px; /* tamanho da fonte */
font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 20px 20px; /* Bordas arredondadas dos submenus */
box-shadow: 8px 8px 6px #fcc;/* sombra */

}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:url(URL DA IMAGEM) bottom right no-repeat;
color:#ff57ae; /* cor da fonte */
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 20px; /* Espaco entre cada aba */
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #ff59a7; /* Cor das abas ao passar o mouse */
color:#FFFFFF; /* Cor do texto ao passar o mouse */
text-decoration:none;
}
.menu li ul {
background:url(URL DA IMAGEM)repeat; /* background submenu */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* largura submenu */
z-index:100;
border-top:1px solid #fff; /* Borda superior submenu */
}
.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 20px 20px; /* Bordas opcoes submenu */
}
.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:#ff59a7; /* cor das opcoes ao passar o mouse */
color:#ffffff;
text-decoration:none;
}

#search {
width: 228px; /* largura caixa de pesquisa */
height: 22px;/* altura caixa de pesquisa */
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* background caixa de pesquisa */
background: url(URL DA IMAGEM) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
color:#ff59a7;
}
Visualize e se tudo estiver normal, salve.
Detalhe: você ainda não vai ver o menu.
2. Agora entre em seu Layout, em Elementos da Página, Adicionar Gadget, Html/JavaScript, e cole este código:
<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href=" LINK "> TITULO </a></li>
<li><a href="#"> TITULO </a>
<ul>
<li><a href=" LINK "> SUBTITULO </a></li>
<li><a href=" LINK "> SUBTITULO </a></li>
<li><a href=" LINK "> SUBTITULO </a></li>
<li><a href=" LINK "> SUBTITULO </a></li>
<li><a href=" LINK "> SUBTITULO </a></li>
</ul>
</li>
<li><a href="#"> TITULO </a>
<ul>
<li><a href=" LINK "> SUBTITULO </a></li>
<li><a href=" LINK "> SUBTITULO </a></li>
<li><a href=" LINK "> SUBTITULO </a></li>
<li><a href=" LINK "> SUBTITULO </a></li>
<li><a href=" LINK "> SUBTITULO </a></li>
</ul>
</li>

<li><a href="#"> TITULO </a>
<ul>
<li><a href=" LINK "> SUBTITULO </a></li>
<li><a href=" LINK "> SUBTITULO </a></li>
<li><a href=" LINK "> SUBTITULO </a></li>
<li><a href=" LINK "> SUBTITULO </a></li>
<li><a href=" LINK "> SUBTITULO </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;Search...&quot;;' onfocus='if (this.value == &quot;Search...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Search...'/></form>

</div></div>
É importante lembrar que fica legal adicionar o gadget logo abaixo do cabeçalho.
Em cada código já vem explicando o que fazer basicamente; tente ir testando cada opção modificando ao seu gosto e verificando os efeitos obtidos, adicione as imagens que serão plano de fundo do seu menu em URL da Imagem, troque as cores, alturas, larguras, acrescente os links exceto nos locais com a href =#, quando quiser os submenus. Bem fácil neh ^-^
Espero que gostem e beijus<3






Postar um comentário

23 Comentários

  1. Ola,desculpa se for encomodo,mais como eu posso adicionar o top comentaristas do més?
    ele fika automatico,assim? com o numero de pessoas q comenta?

    ResponderExcluir
  2. Muito lindinho ! :d:

    Beijos,
    Camila Angelina
    http://cantinhodacaps.blogspot.com.br (agora com TEMPLATE ANIMADO)

    ResponderExcluir
  3. Amei o Tutorial fica Lindo :3
    beijos amore
    wwwstartyley.blogspot.com

    ResponderExcluir
  4. :v:Samantha: Eu obtive os códigos no site da Karol (www.karolinevendramini.com) Lá ela ensina como usar de duas maneiras, com e sem avatar. É automático mas pode ser editado também.: 3
    :v: Caps, Bruna e Bianca: Fico feliz que tenham gostado. (*^﹏^*)
    Beijus e obrigada a todas!!!:cat:

    ResponderExcluir
  5. Obrigado por tudo fofa!!! :u: seu blog e muito lindo

    ResponderExcluir
  6. Oii!!!
    Será que você poderia dar uma pequena olhadinha no meu blog?
    ele é novo ainda e eu preciso de ajuda para ele crescer, ^^
    seu blog é muito lindo ^^
    Link: http://kawaii-mund.blogspot.com.br/

    ResponderExcluir
  7. salvei nos favoritos :p
    vou usar no próximo lay do blog.
    http://commirajane.blogspot.com.br/

    ResponderExcluir
  8. Oi!!Roberta!
    Como eu faço para colocar esse menuzinho no top do blog antes do cabeçalho?

    ResponderExcluir
    Respostas
    1. A qual você se refere? Esse com imagens abaixo do cabeçalho?
      Se for mostrei como fazê-lo em: http://reinokawaii.blogspot.com/2012/07/menu-fofo-dynamic-views.html
      Beijus<3

      Excluir
  9. Wow I love that template, will you someday post it here?

    ResponderExcluir
    Respostas
    1. Hi ^^
      Sorry! That template only edited by me, not made by me; it's a base made by Karen Star and I cannot redistribute.
      Kisses...

      Excluir
  10. Muito obrigada e beijinhus ;3

    ResponderExcluir
  11. '-' acho que sou o unico menino que visita seu blog, mas queria te dar uma dica que aprendi, mesmo não tendo tanto conhecimento em html como você,seu blog fica muito lento aki, e eu to usando um computador muito rápido, quase nunca trava ou dá leg, raramente acontece alguma coisa, isso só quando eu forço demais a memória, tipo, abrir photoshop, aplicativos em flash, jogos em 3D, unity, blender, inkscape, corel, etc, tudo junto que ele trava. Mas hoje não abri nada pesado, só o seu blog, acho que o problema são as imagens, principalmente alguns que usam a troca de frames, tipo esse que fica voando pela tela, vi em alguns blogs que divulgam alguns desses códigos pra não termos muito trabalho, facilitando nossa vida, esse gadget(widget, tanto faz)segundo muitos que ouvi falar deixa o blog lento. Outra coisa é que as vezes você coloca imagens de auta resolução, isso também pesa porque força a RAM do computador, acumular j-query, java scrip, também deixa lento. Você é muito inteligente e uma ótima webdesigner, se quisesse ganhar dinheiro com seu blog já teria ganhado muito dinheiro, eu garanto, pq seu conteúdo é de primeira, mas está meio sobrecarregado seu template. Tente corrigir isso. Eu aprendi com alguns profissionais em html (eu tive aulas) que sempre devemos tomar muito cuidado com as imagens pois pesam o carregamento da página, deixam o seu site lento e acaba irritando os visitantes, fazendo assim com que eles deixem de acessar o seu site. É só um aviso pra vc =)

    ResponderExcluir
    Respostas
    1. Agradeço muito seu comentário e desejo boas vindas!!!
      Eu realmente sobrecarrego tudo rsrsrs...adoro esses efeitos e tento me controlar para não colocar tudo que aprendo pela internet aqui rsrsrs....
      Vou seguir seu conselho, já estava querendo usar um layout mais simples, mas ando sem tempo para ficar online e criar um; vou remover algumas coisas porque outros leitores podem estar passando pelo mesmo problema também neh...
      Obrigada pelo elogio, mas ainda tenho muito que aprender para ser uma webdesigner e tenho super vontade disso ^^
      Bjus ;3

      Excluir
  12. Roberta o tuto esta muito bom, mas nao sei pq ele n esta fazendo efeito.... tipo ta tudo direitinho e tals.
    Com a caixa de pesquisas, mas nao aparece os menus la :c
    me ajuda?
    -kissus-

    ResponderExcluir
    Respostas
    1. Vou testar aqui novamente para ver o que está acontecendo ok?
      Bjus ;3

      Excluir
    2. Resolvido: o que acontece é que pode haver erros com menus em modelos do Blogger; no link da atualização que fiz no post o autor ensina o que fazer nesse caso, bem simples ^^
      Obrigada por avisar e beijus <3

      Excluir
  13. Ooi Roberta o menu é lindo mais o template você poderia colocar em baixar porfavor achei muito lindo adoreii
    e roberta as vezes eu pego algumas coisas do seu blog mais não fique preoucupada eu sempre dou creditos
    http://blogpatricinhasestilosas.blogspot.com.br/

    ResponderExcluir
  14. Oi,tem como tirar a barra de pesquisa.Deixar só o menu.

    ResponderExcluir
    Respostas
    1. Tem. Só apagar no CSS as partes que dizem #search e no html a parte do <form...

      Excluir
  15. e a caixa de pesquisa?? eu quero muito colocar ela no cabeçalho,me ajuda com isso?

    ResponderExcluir
    Respostas
    1. Ela é toda personalizada em #search; mude o valor em margin-top:6px; para um número negativo, por exemplo, -160px; isso fará com que ela suba, aí é só adequar ao seu cabeçalho; em margin-right:6px você posiciona para direita ou esquerda mudando o valor também.

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up