Menu para Blog: Colocar Menu Accordion (Sanfona) Vertical no Blog

Veja como criar um menu Accordion no seu blog usando HTML e CSS. Você poderá criar diversos efeitos e combinações de cores para personalizar o menu sanfona (menu Accordion) no seu site ou blog. Outra vantagem deste tipo de menu é que poupa espaço no seu template permitindo colocar vários links que só aparecem ao clicar no menu, ou seja, praticamente a mesma coisa que colocar um submenu no blog.


Colocar Menu Accordion (Sanfona) Vertical no Blog


No Blogger entre na pagina layout > Adicionar Gadget > html/javascript e cole o código:

<style>
ul.container{width:275px;padding:5px;}
li.accoi-menu{list-style:none;padding:1px;width:100%;}
li.title{border-radius:5px;list-style:none;padding:5px;background-color: #069;}
li.title a{color:#ffffff;display:block; padding:5px;font:14px georgia, verdana;overflow:hidden;position:relative;width:100%; text-decoration:none;}
.downlistie{list-style:none;display:none;padding-top:5px;width:100%;}
.downlistie li{list-style:none;border-left:1px solid #dcdcdc;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;border-radius:5px;margin:5px;padding:4px 10px;background-color: #FF0;}
.downlistie li:hover {background-color: #F93;}
.downlistie li a{text-decoration:none;color:#00F;font-family: georgia, verdana;font-size: 14px;}
.downlistie li a:hover {text-decoration:none;color:#333333;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
$('li.title a').click(function(e){
var dropDown = $(this).parent().next();
$('.downlistie').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
e.preventDefault();
})
});</script>
<ul class="container">
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Blogger</a></li>
<li class="downlistie">
<ul>
<li><a href="#" >Templates</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Guides</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Wordpress</a></li>
<li class="downlistie">
<ul>
<li><a href="#" >Themes</a></li>
<li><a href="#">Plugins </a></li>
<li><a href="#">Guides</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >About us</a></li>
<li class="downlistie">
<ul>
<li><a href="#" >About us</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">Privacy policy</a></li>
</ul></li></ul></li>
</ul>

Como Personalizar Menu do Blog


Para modificar as cores das letras, cor de fundo, tamanho e tipo da fonte que usamos no menu precisamos alterar alguns estilos CSS, logo abaixo temos alguns links com ajuda sobre CSS para ajudá-lo a personalizar seu menu:

Como Formatar Texto do Blog: Mudar Cor, Tamanho e Tipo das Letras
Gerador de Código HTML das Cores
O que é CSS? Para que Serve e Como usar o CSS

Agora veja o que e como mudar a aparência do menu:

li.title
li.title a
Nestes dois estilos acima podemos alterar a aparência dos botões principais do menu (aparência do menu quando está totalmente fechado). Então modifique a cor de fundo ou das letras, tipo e tamanho das fontes. Lembrando que color:#... é a cor da fonte e background-color:#.... é a cor de fundo. Se precisar ajuda para formatar o texto veja os links que mencionamos anteriormente com dicas de CSS.

.downlistie li - cor de fundo dos botões do submenu (itens ocultos no menu accordion)
.downlistie li:hover - cor de fundo dos botões do submenu quando o mouse está sobre eles
.downlistie li a - estilo das letras dos itens ocultos do menu
.downlistie li a:hover - estilo das letras quando o mouse está sobre o item

Como você pode ver esses 4 estilos CSS que descrevemos acima controlam os botões que aparecem quando clicamos em algum item do menu sanfona, portanto faça seus testes para achar as cores e fontes que mais combinam com o layout do seu blog. Veja outras dicas para criar efeitos em links:
Efeitos em Links Usando Gifs Animados como Imagens de Fundo
Como Colocar Efeito Arco-Íris nos Links do Blog

Adicionar ou Remover Itens do Menu do Blog


Embora seja um código longo ele se repete varias vezes para criar cada item do menu e submenu (menu accordion), então para editar os links do menu recomendamos que faça por partes e salve as alterações a cada trecho que terminar de editar assim não correrá o risco de perder seu trabalho.

O trecho a seguir é repetido varias vezes apenas trocando os nomes dos links (texto que aparece no menu):

<li class="title"><a href="#" >Blogger</a></li>
<li class="downlistie">
<ul>
<li><ahref="#" >Templates</a></li>
<li><ahref="#">Widgets</a></li>
<li><a href="#">Guides</a></li>
</ul></li></ul></li>

Nesta linha:
<li class="title"><a href="#" >Blogger</a></li>. Altere somente o texto Blogger que será o texto visível no seu menu. Mas não apague o sinal # que está no lugar do link senão o menu não funciona.

Os itens do menu (links) que aparecem são as linhas:

<li><ahref="#" >Templates</a></li>

Que você pode ver que são repetidas varias vezes apenas com um texto diferente, portanto edite cada uma delas trocando a palavra templates pelo que deseja mostrar no seu menu.

E também altere o link apagando o sinal # e colocando no lugar dele o endereço da pagina que deseja abrir quando alguém clicar no menu. Veja abaixo um exemplo deste trecho de código alterado com links do nosso site:

<li class="title"><a href="#" >Dicas para Blogs</a></li>
<li class="downlistie">
<ul>
<li><ahref="http://www.dicasparablogs.com.br/p/novas-dicas-para-blog-atualizacoes.html" >Posts Recentes</a></li>
<li><ahref="http://www.dicasparablogs.com.br/p/dicas-para-blogs-no-facebook.html">Mais Curtidas no Facebook</a></li>
<li><a href="http://www.dicasparablogs.com.br/2010/03/mostrar-slides-com-as-postagens.html">Criar Slides</a></li>
</ul></li></ul></li>

Veja mais tutoriais sobre criar menu para blogs:
Menu Horizontal com Efeitos no Blogger usando CSS
Colocar Menu de Navegação no Blogger (Inicio > Marcador > Post)
Criar e Colocar um Menu com SubMenu com CSS no Blog

Esse código foi publicado pelo site Windroid Club (em inglês) e achamos bem interessante por isso fizemos esse post para compartilhar com você essa dica. Embora este tutorial para criar um menu com submenu estilo accordion seja longo não é tão difícil de fazer. Apenas não tenha pressa de terminar e como já falamos lembre-se de fazer testes e salvar cada trecho que alterar. Abraços e sucesso com seu blog.

15 comentários :

  1. Puz No meu Ficou Lindooooo Obrigada Amoo Seu Blog !

    ResponderExcluir
  2. Olá, estou tentando modificar a margem esquerda desse menu, mas não consigo. Será que você pode me ajudar? O endereço do blog é http://inovartpersonalizados.blogspot.com
    Já tentei de várias formas, mas não consigo centralizar esse menu.

    ResponderExcluir
  3. tente colocar margin-left:20px, logo nas primeiras linhas do css, veja aqui:

    ul.container{width:275px;padding:5px;margin-left:20px}

    depois ajuste o valor 20.

    ResponderExcluir
  4. Obrigada pela dica, Fabiano! Infelizmente não deu certo...já havia tentado fazer isso, mas não dá diferença nenhuma :-(
    Enfim, tive que diminuir a a largura da coluna para não ficar tão destoante.
    Vlw!

    ResponderExcluir
  5. Olá, Fabiano. Amei a dica e já adicionei ao meu blog. No lugar da cor dos botões principais eu resolvi fazer um botão em um editor de imagem e adicionar a url. Ficou perfeito... no blog de testes. Mas quando apliquei ao blog público, Receitas de todos nós, os títulos principais ficaram linkados. E quando abro o gadget para examinar o código os títulos estão como deveriam estar, por exemplo: Sobre nós. Só que quando passo o mouse sobre "Sobre nós" aparece no rodapé da tela 'o nome do blog/#'. Como remover este link já que ele não aparece no código?
    Eu gostaria de remover este link porque não posso personalizar a cor destes títulos através do código. Como eles aparecem como link recebem a mesma cor de todos os links dos gadgets que defini através do Designer de modelo.
    Grata, Gisele.

    ResponderExcluir
    Respostas
    1. o texto sobre nós vai ter um link para uma pagina certo?

      Então não precisa ser um submenu você pode colocar um link direto nele.

      em vez de colocar o sinal # coloque o endereço da pagina.

      se quiser usar o sobre nós como texto simples e escrever sugiro que adicione outro gadget

      Excluir
    2. Não, o texto 'Sobre nós' não vai ter um link, nem os títulos dos outros botões principais.
      O mesmo código em outro gadget?
      Cheguei a pensar nisso porque realmente não quero linkar os títulos dos botões principais.
      De qualquer forma valeu muito a sua resposta.
      Estou quebrando a cabeça para incluir alguns códigos novos no blog e já percebi que alguns códigos, mesmo excluídos, acabam ficando ocultos e a solução é começar com um novo gadget ou template.
      Gostei desta dica. Teria poupado muito do meu tempo se alguém tivesse me dito isso antes.
      Obrigada. Abraços.

      Excluir
  6. os botões principais não tem link eles só servem para abrir o submenu.

    mas para escrever o sobre nós sem link não precisa incluir neste código do menu é mais complicado para formatar, por isso falei para adicionar como outro gadget ou depois que fecha as tags no menu assim o "sobre nós" terá a formatação de texto comum

    ResponderExcluir
    Respostas
    1. O "Sobre nós" é um botão principal que abre um submenu com 3 itens. Então não posso colocá-lo em outro gadget e nem colocá-lo depois do fechamento do script. Além dele tenho mais 7 botões principais com 7 submenus. Eu organizei minhas postagens de modo a poder encontrar qualquer receita rapidamente e receitas similares também.
      Mas o que não tem remédio, remediado está. Apliquei uma cor mais clara a todos os links dos gadgets. Não era o que eu queria, mas é um detalhe tão pequeno, né?
      O importante é que o menu funciona e muito bem.
      Valeuzão pelo seu tempo e paciência.

      Excluir
    2. Oi de novo, Fabiano.
      Só voltei para dizer que resolvi o problema.
      Baixei um novo template em um blog de testes (mesmo modelo, mas sem customizações) e fui acrescentando minhas personalizações aos poucos.
      No final o menu ficou como eu queria desde o começo e eu entendi porque é tão difícil para vocês identificarem a raiz do problema. São muitos caracteres que podem criar conflitos nos códigos.
      De qualquer forma, foi a partir das suas dicas que criei coragem para mudar o template.
      Obrigada.

      Excluir
  7. o único jeito é editar o menu completo para trocar cores de apenas um item seria necessário criar outro menu trocando o nome de todos os estilos

    ResponderExcluir
  8. Como faço pra colocá-lo em horizontal?

    ResponderExcluir
  9. tente alterar o valor 275 para 900 na linha:

    ul.container{width:275px;padding:5px;}

    e trocar 100% por uma media em px
    li.accoi-menu{list-style:none;padding:1px;width:100%;}

    por exemplo width:250px

    depois tente ajudar as larguras destes valores para a quantidade de itens que você pretende usar

    ResponderExcluir
  10. é bom saber que resolveu o problema..

    ResponderExcluir
  11. Obrigado ajudou muito

    ResponderExcluir