Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1498507634
Vida do cache: 1498550834
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

Menu Sanfona / Accordion com CSS3

Hoje você verá como construir um Menu sanfona, ou Menu Accordion, construído apenas com o uso de CSS.
Este tipo de menu mais comum na web é aquele cujo efeito necessita do uso de jQuery, mas este que você vai aprender hoje, não utiliza de nenhum script, ele usa apenas efeito de transição CSS3 está atualmente disponível em diversos navegadores como Safari, Chrome, Firefox, IE8 e Opera.
A característica mais essencial CSS3 que precisamos para um bom funcionamento deste menu, é adicionar efeitos de transição. Feito isso ele irá funcionar praticamente da mesma forma que funciona o Menu Accordion utilizando o JQuery.

DEMO

Este Menu é criado a partir de aplicações, e seu comportamento básico é mostrar um submenu (e fechar o outro) quando se clica ou passa o mouse sobre o link do menu principal.

Bom, agora chega de explicações, e vamos ao que interessa, instalar o Menu Accordion no seu blog, usando CSS3.

1. Aplicar os estilos CSS3:

Acesse o 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:

/* Menu Vertical Sanfona
----------------------------------------------- */
.verticalsanfona ul {
margin: 0;
padding: 0;
list-style:none;
width: auto;
}
.verticalsanfona ul li {
display:block;
overflow: hidden;
margin: 0;
padding: 0;
list-style:none;
height:40px;
width: auto;
background-color:#f0f0f0;
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
}

.verticalsanfona ul li h3 {
display:block;
margin: 0;
padding:10px;
padding-left:20px;
height:19px;
border-top:#f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform:capitalize;
color: #000;
background: #cccccc url(ENDEREÇO-DA-SUA-IMAGEM) repeat;
text-align: left;
font-size:16px;
}
.verticalsanfona ul li h3 a{
color: #000;
}

.verticalsanfona ul li h3 a:hover{
color: #fff;
}

.verticalsanfona ul li div {
margin:0;
overflow: auto;
padding:10px;
padding-left:20px;
height:220px;
}

.verticalsanfona ul li:hover {
height: 280px;
}

.verticalsanfona:hover ul li:hover h3 {
color:#fff;
background: #000000 url(ENDEREÇO-DA-SUA-IMAGEM) repeat;;
}

.verticalsanfona ul li h3:hover {
cursor:pointer;
}

As partes que você pode e deve editar estão destacadas em vermelho no código.
Este campos foram destacados para você conseguir identificar melhor no código os elementos que deverão ser editados por você de acordo com as cores do seu blog.
Lembrando que onde estão: url(ENDEREÇO-DA-SUA-IMAGEM) se refere ao local que você deverá inserir o endereço da sua imagem, se caso você quiser utilizar uma imagem para seu menu. Se preferir utilizar apenas cores, apague esta parte do código.

Você pode adicionar vários outros efeitos para melhorar o seu menu sanfona, como CSS3 border-radius ou sombra no texto.

 

2. Aplicar o HTML:

Vá no menu “layout” ? Clique em ‘Adicionar um elemento de página’? Escolha tipo ‘HTML/Javascript’ e cole o seguinte código lá:

<div class="verticalsanfona">
<ul>
<li>
<h3>Título 1</h3>
<div>Coloque aqui o conteúdo para o Titulo 1.</div></li>
<li><h3>Titulo 2</h3>
<div>Coloque aqui o conteúdo para o Titulo 2</div></li>
<li><h3>Titulo 3</h3>
<div>Coloque aqui o conteúdo para o Titulo 3.</div></li>
<li><h3>Titulo 4</h3>
<div>Coloque aqui o conteúdo para o Titulo 4</div></li>
</ul>
</div>

Agora é só acrescentar seus títulos e conteúdo ao seu menu e pronto!
Viu como é fácil? :)



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.

38 Comentários

  1. Dimi Antoni disse:

    Olá Vanessa, eu desenvolvi um menu accordion que é alimentado
    dinamicamente por um código PHP, o que ele faz é buscar no banco
    todas as categorias e monta um accordion com as subcategorias dentro da categoria a qual ela pertence e etá relacionada no banco de dados! Porém somente no explorer ele não funciona, ele me mostra a primeira categoria e não permite abrir para vizualizar as subcategorias, e monta um acorddion com erro que não aprece nada do conteúdo dentro, eu criei este menu usando o accordion disponível na Jquery UI se souber de algum artigo ou site ou se você souber como posso solucionar este erro ficarei grato, pois meu prazo encerra daqui a duas semanas para entregar este projeto e não consigo resolver este problema. Desde já agradeço!!

  2. Iguinho__- HQ disse:

    Clau, o tutorial nao funcionou em meu blog! :(

  3. .: Moça Arteira - Dani Pimenta :. disse:

    Oi, Clau!
    Excelente tutorial! Era tudo o que eu precisava! Ficou uma belezinha no meu blog (www.danipimenta.blogspot.com)!!! rs
    Obrigada!
    Daniele Pimenta

  4. Raphael B. de Sousa disse:

    Boa noite.
    Mais uma vez parabéns pelo blog que é ótimo.
    Só uma dúvida que fiquei: No caso de um menu horizontal que peguei em um dos seus artigos este funcionou muito bem em todos os navegadores, porém este menu vertical sanfona funciona bem no Firefox, com algumas mudanças no Chrome e alguns erros pesados no Internet Explorer. Tem algum código java para este menu sanfona ou alguma coisa que pode ser feita?

    Grato e aguardo sua ajuda. Abraço!

  5. Raphael B. de Sousa disse:

    Bom dia.
    Estou com problemas em relação a esse tipo de menu quando utilizo diferentes navegadores: O espaçamento de cada linha do menu no Google Chrome não há enquanto pelo Firefox está no espaçamento desejado. Tem como você me dar um help?

    Obrigado e parabéns pelo site mais uma vez.

  6. Drica Peccini disse:

    Clau, não estou conseguindo.
    No meu layout a caixa está ficando extendida e as letras grandes d+, fica fora do sidebar e não estou conseguindo reduzir para encaixar.
    Tem alguma idéia do que posso fazer?
    bjs

  7. ARTENIX disse:

    Perfeito, veja no meu blog, eu editei todas as partes!!!
    http://www.artenix.com.br, vc nao sabe o quanto estava precisando, pois sempre coloco em meu blog, coisas leves, para que ele seja rapido e eficiente!!

    Obrigadissimo!!

  8. .:: Clau ::. disse:

    Paulinhow
    Depois eu dou uma pesquisada para ver sobre isso que vc falou.

    Leninha
    No titulo não, mas vc pode incluir varios links dentro do quadrado de conteudo.
    Use este código:
    <a href="LINK">TITULO</a>
    <br />

  9. Leninha - LTScrapsAnimados disse:

    Clau, tem como colocar vários conteudos(links) em um mesmo título, como seria já tentei aqui e nada!

  10. ?·?•?þ?uL??ho??•???- Adm disse:

    Ola Clau, queria saber se vc não sabe ou tem um codigo que seja parecido com esse da sanfona mas dessa forma, Tipo o top 10 do BaixakiJogos.
    Link: http://www.baixakijogos.com.br/
    No qual a pessoa passa o mouse no nome e abre a imagem, e não volte a fechar, tipo o do baixaki, lembro de ter visto em outros sites, mas como exemplo te indico o baixakijogos! Mas uma dica de post, tou super interesado nisso!

  11. .:: Clau ::. disse:

    Taillard
    Obrigada pela dica querida. E vê se aparece mais 😉

  12. Taillard disse:

    Clau
    Voltei rainha!Olha eu encontrei no blog da Gem@ um tutorial do menu Accordion horizontal usando o CSS.
    E mais um site que tem mais de 100 tipos de menus animados sem a necessidade de instalar ou usar scrypts!
    Beijao rainha!
    Ah em tempo…eu usei o template pessoal,que você me montou no meu blog de livros aqui na Suiça.
    Fiz algumas modificações e ficaram boas!

  13. Max Martins disse:

    Oi, Clau

    Entendi perfeitamente.
    Obrigado pela atenção.

    Bjs

  14. .:: Clau ::. disse:

    Max Martins
    Vc pode usar esse menu da forma que quiser e onde quiser..só que no caso pra listas de blogs, vc vai ter q inserir os links de cada blog que vc indica de forma manual, e não mais pelo uso do gadget "lista de blogs", entendeu?

  15. Max Martins disse:

    Oi, Clau

    Tenho 4 listas de blogs que indico a leitura (inclusive o MB) na sidebar. Posso usar esse menu do tutorial?

    Forte abraço

  16. Taillard disse:

    Clau
    Ando cheia de trabalho e quase sem tempo para deixar um comentario,ou até mesmo ler algum bom blog como o teu rainha.Mas algo chamou-me a atenção e vou experimentar inverter o menu para horizontal.
    Caso der certo eu vou coloca-lo no meu blog,e colocar os creditos a você rainha.
    Blog é viciooo!!!\O/

  17. ::Clau:: disse:

    @lordk:
    Para ficar clicável como vc citou só com o script mesmo…pq o q dá esse efeito parecido com o q usa o script é o "transitiion".
    Sobre o q vc falou em ensinar a aplicar esses tutoriais em site, isso é um projeto q tenho mais será bem mais para o futuro, pq ainda estou começando a aprender a mexer em outras plataformas, por enqto só domino mesmo recursos para plataforma Blogger.
    Sobre a pergunta pessoal: eu não me arrependi em ter me formado em direito não, inclusive atuo na área,é dele q tiro meu sustento, digamos assim..rs.
    mas além de adorar o direito,tb adoro esta área de webdesigner..e confesso q tem horas q sinto mais fascínio por esta área…talvez por ser algo q passei a conhecer e desenvolver há pouco tempo.
    Eu acho q o mais importante é a gente poder fazer o q gosta, e eu graças a deus, consegui conciliar ambas as áreas, apesar de distintas. E tenho intenção em me profissionalizar tb na área de web. Conhecimento nunca é demais, principalmente qdo temos vontade de atuar no q nos faz bem e no q gostamos não é verdade? Já que vc gosta das 2 áreas, dedique-se a ambas…q nem eu faço 😉

  18. lordk disse:

    Clau parabems me ajudou muito, procurei muito por um tutorial assim, porem só encontrava em script java ou jquery me surpreendi ao ver em css.
    Só uma duvida poderia ensinar como fazer o mesmo porem expansivel somente se clicar ao invés de passar o mouse.
    Estou tentando aprender webdesign na marra e li, em seu perfil, que voçê conseguiu superar todos os desafios e isto é um grande incentivo para todos nós eu usarei seu exemplo em um futuro site gostaria que se dedicasse a fazer exemplos pra aplicação em sites
    Pergunta pessoal: se arrependeu de fazer direito? eu estou com mente e coração dividos por sistemas ou direito ja tenho certa pratica e facilidade com webdesign mas o direito tambem me fascina e em mercado é mais valorizado… enfim bjos Paulo Kennedy

  19. Matheus Rezende disse:

    Como Faço Para colocar bordas nos comentario assim igual ao seu @::Clau::

  20. ::Clau:: disse:

    @?·?•?þ?uL??ho??•???- ADM:
    Q bom que deu certo, e obrigada pelo elogio, mas só preciso te corrigir um detalhe: não é "bom" e sim "boa",pois sou mulher..rs
    Valeu ^^

  21. ?·?•?þ?uL??ho??•???- Adm disse:

    Muito bom Clau, resolveu aqui! Muito obrigado, vc realmente é especialista e muito bom no que faz! Vlw

  22. ::Clau:: disse:

    @?·?•?þ?uL??ho??•???- ADM:
    É que no seu template o h3 já deve estar configurado para aparecer em negrito, pq no código deste menu, usa-se h3 para os titulos dele.
    Mas tente fazer o seguinte:no código do 1º passo (CSS), todas as partes que fizerem referência a "h3", inclua esta linha:
    font-weight:normal;

  23. ?·?•?þ?uL??ho??•???- Adm disse:

    Olá Darkness, queria saber como faço para tirar essa propriedade que deixa os links em Negrito? Que texto no codigo devo apagar ou inserir?

  24. ::Clau:: disse:

    @Thiago:
    @Matheus G.

    Eu não sei como ajudar, pois o meu Firefox é o 3.6 e funciona normalmente, testei ele em outros pcs e em todos funcionaram. No código acima as bordas não estão arredondadas mesmo.

  25. Matheus G. disse:

    vou tentar atualizar mais uma vez meus navegadores e ver se da certo.

  26. Thiago disse:

    No Firefox 3.6 não está funcionando o Efeito.

    Mas no chrome esta normal.

    E as bordas inferiores do titulo tbm não estão arredondando.

    O Que pode ser isso?

    Pois vi em outro site esse mesmo recurso com o Firefox e Funcionou perfeitamente.

    (Mas o código era muito maior)

  27. ::Clau:: disse:

    @Matheus G.:
    Sim é relativamente novo. Estranho, pq pra mim ele aparece no Firefox,no chrome e até no IEca8…

  28. Matheus G. disse:

    Ei não sei se vc percebeu mas e feito de translação com o css3 não funciona em alguns navegadores uso o chrome,firefox na suas versões mais atualizadas e o unico que funcionou foi no chrome.Esse recurso de trasição com css3 é novo ?

  29. ::Clau:: disse:

    @[ADM]Shot:
    Muito obrigada pelo aviso. Já estou correndo atrás de resolver esse problema. Valeu!

  30. [ADM]Shot disse:

    Voce deve lembrar de mim [ADM]Shot venho aqui avisar que postaram o seu template em outros portais de templates, sendo eles: BCrete e Rox Templates mais o Roba Template já dito, toe providencias.

  31. ::Clau:: disse:

    @gabriela m.:
    Para fazer esse efeito que vc quer teria q ser o que funciona a base de script.
    Obrigada pela visita e pelo comentário.Volte sempre!

    @DeeJaay iFilezinho:
    Eu sei que efeito é esse. Depois publico um tutorial sobre ele.
    Obrigada pela visita e pelo comentário.Volte sempre!

  32. ' Gleison- disse:

    ooi! amo o blog! tenho um pikeno trabalho pra vocês: como faço essa borda das imaagens no blogger?

    OBS: ée wordpress >> http://www.cdscompletos.org/

  33. gabriela m. disse:

    Oi Clau, vi na demo que as abas se abrem ao passar o mouse, não há como fazer elas abrirem apenas quando clicar?
    (Vi num template todo em html puro, que usava navigations, e esse menu é parecido. Eu quero colocar uma navigation do tipo do template que vi, só que em xml, e acho que esse menu serve.

  34. ::Clau:: disse:

    @MamaNunes:
    eu tb sou apaixonada por CSS3, ainda vou criar um blog todo no CSS e HTML5…=)

    @[ADM]Shot
    Obrigada pelo aviso, já estou tomando providências. Valeu.

    Gente obrigada pelos comentários e pela visita viu?

  35. Kakashi disse:

    lol muito loko

  36. [ADM]Shot disse:

    Denuncia: a turma do roba templates pegaram seu template, seu que robar template é errado e venho avisar a voce, nao acho justo que voce tenho um template exclusivo e um fdp vai la e copia eu tenho uma raiva disso, denucie ele ao Blogger, quem sabe o Blogger nao deleta o blog dele…

  37. MamaNunes disse:

    Hoooohooooo!!! Eu to apaixonada por CSS3!!!!
    Ótima dica!
    beijo da Mama?

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

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