Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1506028744
Vida do cache: 1506071944
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Menus

Subnav Menu Horizontal com submenus

Em outro artigo eu publiquei um modelo de Menu Horizontal Dropdown que funciona a base de puro CSS.

Neste tutorial, veremos um outro tipo de menu no estilo dropdown, que tem um efeito bastante interessante, que foi desenvolvido por Soh, do site SohTanaka.


Demo

Me pediram para explicar como instalar este menu no Blogger, então vamos lá:

 

1. Aplicar estilos CSS

Vá no menu “Modelo”, entre na edição HTML do seu template, não precisa clicar em “expandir modelos de widgets” e procure pela tag ]]></b:skin>
e cole o seguinte código logo ACIMA dela:

/* Subnav Menu
------------------ */
/*-- container geral do menu--*/
ul#topnav {
margin: 0;
padding: 0;
float: left;
width: 100%; /*-- se quiser edite a largura total do menu --*/
list-style: none;
position: relative;
font-size: 1.2em; /*-- edite tamanho da fonte--*/
background: #000; /*-- edite cor de fundo--*/
}
/*-- itens das listas--*/
ul#topnav li {
float: left;
margin: 0;
padding: 0;
border-right: 1px solid #555; /*--edite borda--*/
}
/*-- links dos itens das listas --*/
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #fff; /*-- edite cor dos links --*/
text-decoration: none;
}
/*-- links dos itens das listas no modo hover --*/
ul#topnav li a:hover {
color:#ccc; /*-- edite cor dos links --*/
}
/*-- item da lista no modo hover--*/
ul#topnav li:hover {
background: #1376c9 ; /*-- edite cor de fundo--*/
}

/*-- item da lista do submenu--*/
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0;
top:35px;
display: none;
width: 100%;
background: #1376c9; /*-- edite cor de fundo do submenu--*/
color: #fff; /*-- edite cor dos links do submenu--*/
/*--bordas arredondadas a direita--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
/*--bordas arredondadas a esquerda--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}

/*-- item da lista do submenu no estado hover--*/
ul#topnav li:hover span {
display: block;
}
/*-- links do item da lista do submenu--*/
ul#topnav li span a {
display: inline;
color:#ccc; /*-- edite cor dos links do submenu --*/
}
/*-- links do item da lista do submenu no modo hover--*/
ul#topnav li span a:hover {
text-decoration: underline;
color:#000; /*-- edite cor dos links do submenu no estado hover --*/
}

Obs: Todos os trechos editáveis já estão identificados e destacados no código.

 

2. Instalar o arquivo Javascript

Este script funciona em conjunto com a biblioteca do JQuery na versão 1.4.2, caso você já tenha esta biblioteca instalada em seu blog, não será necessário repetir a chamada dela( linha destacada na cor azul no código)

Volte no menu “Modelo >>editar html” e procure pela tag </head>
e cole o seguinte código logo ABAIXO dela:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;ul#topnav li&quot;).hover(function() {
$(this).css({ &#39;background&#39; : &#39;#1376c9 &#39;}); //Edite cor de fundo para o item da lista
$(this).find(&quot;span&quot;).show(); //subnav
} , function() { //on hover out...
$(this).css({ &#39;background&#39; : &#39;none&#39;});
$(this).find(&quot;span&quot;).hide();
});

});
</script>

 

3. Inserir o código html

Agora você deve inserir o código html do menu para que ele fique visível no blog.

<ul id='topnav'>

<li><a href='seu-link-aqui'>Link 1</a></li>

<li><a href='seu-link-aqui'>Link 2 &#8595;</a>
<!--Submenu inicio-->
 <span>
 <a href='seu-link-aqui'>Submenu Link</a> |
 <a href='seu-link-aqui'>Submenu Link</a> |
 <a href='seu-link-aqui'>Submenu Link</a>
 </span>
 <!--Submenu fim-->
 </li>

<li><a href='seu-link-aqui'>Link 3 &#8595;</a>
<!--Submenu inicio-->
 <span>
 <a href='seu-link-aqui'>Submenu Link</a> |
 <a href='seu-link-aqui'>Submenu Link</a> |
 <a href='seu-link-aqui'>Submenu Link</a>
 </span>
 <!--Submenu fim-->
</li>

<li><a href='seu-link-aqui'>Link 4 &#8595;</a>
<!--Submenu inicio-->
 <span>
 <a href='seu-link-aqui'>Submenu Link</a> |
 <a href='seu-link-aqui'>Submenu Link</a> |
 <a href='seu-link-aqui'>Submenu Link</a>
 </span>
 <!--Submenu fim-->
</li>

<li><a href='seu-link-aqui'>Link 5</a></li>

</ul>

Agora é só editar os links e nome dos botões no menu, nos locais indicados.

Os trechos destacados na cor verde se referem aos item do submenu.
Caso queira adicionar mais links no submenu, basta repetir o código.
Os trechos destacados na cor azul se referem aos itens do menu principal.
Caso queira adicionar mais links, basta repetir o código.
Lembrando que: você deve tomar cuidado na quantidade de links que irá adicionar no menu, para evitar que ultrapasse a largura total do menu.

4. Escolher o local do menu

Escolha o local mais adequado para instalar o seu menu no template.
Se quiser colocar abaixo do cabeçalho, procure o trecho referente ao código do cabeçalho e cole o código html do menu logo após o final do código referente ao cabeçalho.
Se quiser que o menu fique acima da barra de cabeçalho, cole o código do menu acima do código referente ao cabeçalho.

[dica]Dica:
Se estiver usando algum modelo de template do “designer de modelo do blogger”,a tag referente ao cabeçalho é: <header> .
Se estiver usando algum modelo do template minima, a tag referente ao cabeçalho é: <div id=’header-wrapper’>
Se quiser, pode experimentar colar o código referente ao menu logo abaixo da tag:
<div id=’content-wrapper’>[/dica]

Não há como eu informar precisamente onde instalar o menu, a escolha do local deverá ficar por sua conta, até porque cada template é diferente um do outro.

Você pode editar as cores do seu menu, se quiser, para isto basta alterar os códigos referentes as cores no código da 1º parte deste tutorial.

 

Atenção: Este tutorial aplica-se aos antigos modelos de layout (Templates minima). A eficácia da dica aqui apresentada não foi testada nos novos Designer de Modelo.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

51 Comentários

  1. Eila disse:

    Como faço para colocar os links do submenu em vertical?

  2. Graça disse:

    Clau,consegui colocar,só falta colocar os links.
    Obrigada,bjs

  3. jessica disse:

    uma duvida mortal q nao consigo achar o problema um exemplo aki na parte do script jquery esta aparecendo o menu e quando clico nele aparece o submenu so que quando clico em outro menu o submenu anterior fica aparecendo ja fiz de tudo nao consigo achar a formula exata para fazer ele desaparecer quando eu clicar em outro menu tem como me ajudar?
    Jquery - Menu fadeIn e fadeOut

    var $j = jQuery.noConflict();
    $j(document).ready(function() {
    });
    function Reveal(a){
    var ul = a.parentNode.getElementsByTagName("UL").item(0);
    $j(ul).animate({height: 'toggle' ,opacity: 'toggle'}, "slow");
    }

    • Vanessa disse:

      Alguns recursos em javascript podem variar de template para template, ou podem apresentar conflitos com outros arquivos javascript. Em alguns casos só é possível encontrar alguma resolução testando, e por não dispor de tempo para isso, no momento não tenho como te ajudar.

  4. Gabriel Stutz disse:

    No meu caso, eu procura o código que vc informa e não acha, qual templete vc usa??

  5. Larissa P. disse:

    Olá… gostaria de uma ajuda. Eu coloquei o menu, porem os links nao aparecem na pagina, tem la o nome, mas quando coloco o mouse em cima, nao aparecem os submenus. Você pode me ajudar? Já fiz e refiz varias vezes mas continua a mesma coisa. grata desde já.

    • Vanessa disse:

      Alguns recursos podem variar de template para template, ou podem apresentar conflitos, ou pode ser algo relacionado ao seu template. Lamento, mas não tenho como te ajudar. Sendo assim, eu sugiro que vc reporte este problema diretamente no fórum oficial do Blogger, de qualquer forma agradeço pelo comentário.

    • John Johnes disse:

      Comigo aconteceu a mesma coisa. uma pena.

  6. Felipe disse:

    Eu queria uma menu do topo tipo desse site aqui tem como ?

    victoreleo.com/

  7. Andre Miranda disse:

    Olá, eu queria saber como posso adicionar esse menu para ele acompanhar o rolamento da página do blog, sera que tem como ?
    Atenciosamente, espero.

  8. Vitor disse:

    No meu caso o menu é colado com a box de posts. E quando eu passou o mouse os submenus ficam escondidos atrás da box. Como eu posso fazer para que ele apareça acima da box?

  9. LUCAS disse:

    ADM, DA UMA FORÇA AI como coloco os sub meno na vertical? e como posso resolver o problema que os submenu esta ficando por traz de alguns elementos do meu blog.

    • Vanessa disse:

      O modelo e efeito deste hack menu é esse que está ai. Se vc quer um menu na vertical, sugiro que dê uma procurada no índice para ver se encontra algum outro modelo que te agrade, caso contrário, vc terá que dar uma pesquisada e ver se encontram algo por ai.

  10. LUCAS disse:

    como coloco os sub meno na vertical? e como posso resolver o problema que os submenu esta ficando por traz de alguns elementos do meu blog.

  11. Ana disse:

    o meu foi a mesma situação do “Carlos Alves” só pegou no rodapé! O
    que eu faço para funcionar normalmente no cabeçalho do blog???

  12. Vahine disse:

    Olha mt obg pela ajuda!!
    depois de muito pesquisar pela internet para finalmente achar algum codigo que me ajudasse a por uma barra de menu horizontal com directa ligação com os marcadores, foi mt dificil achar, ate que cheguei a ti!
    Mt obgd mesmo!

  13. Di web disse:

    direitinhoooo \o/ muito obrigada :)

  14. Carlos Alves disse:

    Não funcionou o menu no cabeçalho,somente no rodapé!

  15. Olá, gostaria que ao abrir o site, já ficasse um dos submenus aberto… existe essa possibilidade?? preciso muitoo disso .rs!

  16. Dim disse:

    Obrigado !!!! Parabém vocês tão fazendo um otimo Trabalho!!!

  17. Gessica disse:

    O que é container geral do meun? kk

  18. Eterna Graça disse:

    Tem como personalizar o menu original do blogger, mudar a cor, o tamanho da fonte, etc? Estou precisando reduzir um pouquinho o tamanho da fonte do meu.

  19. Claudio Luiz Music disse:

    Muito bom o tutorial, fiz algumas modificações no css para ficar de acordo com meu template e está funcionando perfeitamente!
    Vlw!!!

  20. RLS STUDIOS disse:

    tambem funciona nos novos pois testei olha.

  21. .:: Clau ::. disse:

    Ariel
    Conforme eu já havia dito anteriormente, alguns recursos podem variar de template para template. Sendo assim, lamento, mas não tenho como ajudar, de qualquer forma agradeço pelo comentário. Volte sempre.

  22. Ariel Alves disse:

    Oi Clau,
    fiz tudinho q vc falou, mas estou usando o template "Janela de imagem" do blogger q tem abas. Então o menu e os submenus ficam todos abertos espalhados em forma de abas desse template. O q eu faço pra ficar direitinho? Me socorre.

  23. Cremilton disse:

    Excelente dica clau, estou criando um blog, e ja esta instalado, funcionou perfeitamente, só que para isso instalei num gadget Html/JavaScript, um abraço!

  24. .:: Clau ::. disse:

    Pessoal,
    Eu instalei esse menu em um blog de testes e deu tudo certo, inclusive irei usa-lo no novo layout do MB. Mas pode ser que não dê 100% certo para todo mundo. Isso ocorre pq, alguns recursos podem variar de template para template. Sendo assim, lamento, mas não tenho como ajudar vcs, de qualquer forma agradeço pelos comentários.

  25. Gisele Bispo disse:

    Oi Clau, estou com um problema, instalei o menu deu tudo certinho, até alterei as cores só que o sub-menu fica por tras da mensagem, vc pode me ajudar

  26. ? Bih ? disse:

    Me ajude, esse foi o unico menu que consegui colocar, e quando passa o mouse em cima dos links, quando voce desce pra clicar, o submenu desaparece!
    Que raivaaa

  27. Transcendent All disse:

    Thanks

  28. Lucas Vasconcelos disse:

    Olá Clau!

    O menu ficou ótimo e funciona perfeitamente no Internet Explorer. Mas, no navegador Firefox, o menu aparece na tela, mas não funcionam os links. VoC~e sabe me dizer o que posso fazer para que funcione também perfeitamente no navegadir Firefox?

    Agradeço desde já pela atenção.

    Att.,

    Lucas Corradi Vasconcelos

  29. Lucas Vasconcelos disse:

    Clau, estou tendo um problema com o menu. Ao abrir o meu blog (em construção) pelo Internet Explorer,o funcionamento do menu e submenu é perfeito, mas, no Firefox a barra de menu aparece mas não funciona. Fica como se fosse apenas uma imagem, ou seja, não funcionam os links e, consequentemente, o submenu. Você sabe o que deve fazer para que ele funcione em outros navegadores além do Internet Explorer?

  30. ? yaa disse:

    Oi, Clau.
    Tem duas horas que eu estou tentando colocar esse menu no blog mas não consigo acertar. A única modificação que fiz no CSS foi trocar a cor azul por verde, e estava testando antes de inserir os links; mas quando salvo e vou visualizar, o menu aparece na página, mas os menus principais não constam como link, os submenus não aparecem de jeito nenhum e não dá sequer pra selecionar como se fosse texto ç.ç
    Se bem que na página do blogger ele aparece como se existisse e funcionasse tudo certinho…
    Será que o código não deu pau por ter muita gente usando simultaneamente no mesmo host?

  31. Abner disse:

    Suas dicas são as melhores graças a vc cada dia meu blog fica melhor!

  32. .:: Clau ::. disse:

    Blog Download
    Não há como eu saber o que ocorre com seu template. Alguns recursos variam de template para template, sendo assim, não tenho como te ajudar.

  33. Blog Download disse:

    Clau deu um pequeno problema não aparece os submenus, eu coloquei todos os links mais não aparece, oque eu faço?

  34. Zaraki disse:

    FIZ NO MEU BLOG FICOU MUITO LEGAL , VALEU

  35. Dr Marcelo Quirino disse:

    SAbe como faço para centralizar o menu? E como faço para que ao clicar num menu, ele fique destacado dos demais?

    Valeu!

  36. .:: Clau ::. disse:

    Rickzinhocps
    Todos os trechos editáveis já estão destacados no código do 1º passo. Releia com atenção e vai testando.

  37. Rickzinhocps disse:

    Oi clau eu estava mudando as cores do menu e mudi tudo mais nao consegui achar o codigo quem muda o efeito hover do menu, quando passa o mouse, fica azul e aparece o menu em baixo da cor qeu eu alterei …
    Não consegui achar o codigo pra mudar esse azul … deu pra entender ?
    E que e dificil explicar

  38. infobender disse:

    Testarei grato pela dica. Seu blog está adicionado ao meu blog http://www.infobender.com.br

  39. .:: Clau ::. disse:

    daivarela
    é só vc buscar a linha do código dentro do seu template para ver se já tem ou não.

  40. Zaraki disse:

    nossa não acredito você fes mesmo , que legal , eu esperei tanto pra encontrar um menu desses , valeu em agora vou tenter ver se consigo estalar ele ,se eu conseguir lhe falarei ok

  41. daivarela disse:

    Oi Clau.

    Como posso saber se já tenho esta biblioteca instalada em seu blog?

    E se tiver e duplicar, há problemas?

    'brigada…

  42. .:: Clau ::. disse:

    Lucas Rafael
    Respondendo a sua pergunta: todos os emails que recebo com sugestões de artigos não são respondidos, e eu vou publicando apenas os tutoriais que teem possibilidades de serem aplicados ao Blogger, de acordo com a minha disponibilidade. Quando não há possibilidade de instalar tais recursos que foram sugeridos, não terá publicação de tutorial.

  43. .:: Clau ::. disse:

    CaDu
    Ops, já abri o blog! rs
    Valeu por me alertar 😉

  44. CaDu disse:

    Clau a blog de demo esta dando a seguinte mensagem "Este blog está aberto exclusivamente a leitores convidados"

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.