Menus Vanessa S.
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.
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() { $("ul#topnav li").hover(function() { $(this).css({ 'background' : '#1376c9 '}); //Edite cor de fundo para o item da lista $(this).find("span").show(); //subnav } , function() { //on hover out... $(this).css({ 'background' : 'none'}); $(this).find("span").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 ↓</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 ↓</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 ↓</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.
Como faço para colocar os links do submenu em vertical?
Clau,consegui colocar,só falta colocar os links.
Obrigada,bjs
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 fadeOutvar $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");
}
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.
No meu caso, eu procura o código que vc informa e não acha, qual templete vc usa??
Este tutorial se aplica a templates para blogger.
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á.
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.
Comigo aconteceu a mesma coisa. uma pena.
Eu queria uma menu do topo tipo desse site aqui tem como ?
victoreleo.com/
Veja se este te agrada:
Menu Rolante no topo do Blog
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.
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?
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.
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.
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.
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???
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!
direitinhoooo \o/ muito obrigada 🙂
Não funcionou o menu no cabeçalho,somente no rodapé!
Olá, gostaria que ao abrir o site, já ficasse um dos submenus aberto… existe essa possibilidade?? preciso muitoo disso .rs!
Se existe eu desconheço.
Obrigado !!!! Parabém vocês tão fazendo um otimo Trabalho!!!
O que é container geral do meun? kk
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.
Muito bom o tutorial, fiz algumas modificações no css para ficar de acordo com meu template e está funcionando perfeitamente!
Vlw!!!
tambem funciona nos novos pois testei olha.
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.
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.
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!
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.
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
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
Thanks
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
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?
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?
Suas dicas são as melhores graças a vc cada dia meu blog fica melhor!
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.
Clau deu um pequeno problema não aparece os submenus, eu coloquei todos os links mais não aparece, oque eu faço?
FIZ NO MEU BLOG FICOU MUITO LEGAL , VALEU
SAbe como faço para centralizar o menu? E como faço para que ao clicar num menu, ele fique destacado dos demais?
Valeu!
Rickzinhocps
Todos os trechos editáveis já estão destacados no código do 1º passo. Releia com atenção e vai testando.
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
Testarei grato pela dica. Seu blog está adicionado ao meu blog http://www.infobender.com.br
daivarela
é só vc buscar a linha do código dentro do seu template para ver se já tem ou não.
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
Oi Clau.
Como posso saber se já tenho esta biblioteca instalada em seu blog?
E se tiver e duplicar, há problemas?
'brigada…
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.
CaDu
Ops, já abri o blog! rs
Valeu por me alertar 😉
Clau a blog de demo esta dando a seguinte mensagem "Este blog está aberto exclusivamente a leitores convidados"