Menus Vanessa S.
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.
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? 🙂
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!!
Infelizmente não sei te dizer como resolver isso.
Clau, o tutorial nao funcionou em meu blog! 🙁
Oi, Clau!
Excelente tutorial! Era tudo o que eu precisava! Ficou uma belezinha no meu blog (www.danipimenta.blogspot.com)!!! rs
Obrigada!
Daniele Pimenta
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!
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.
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
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!!
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 />
Clau, tem como colocar vários conteudos(links) em um mesmo título, como seria já tentei aqui e nada!
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!
Taillard
Obrigada pela dica querida. E vê se aparece mais 😉
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!
Oi, Clau
Entendi perfeitamente.
Obrigado pela atenção.
Bjs
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?
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
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/
@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 😉
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
Como Faço Para colocar bordas nos comentario assim igual ao seu @::Clau::
@?·?•?þ?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 ^^
Muito bom Clau, resolveu aqui! Muito obrigado, vc realmente é especialista e muito bom no que faz! Vlw
@?·?•?þ?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;
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?
@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.
vou tentar atualizar mais uma vez meus navegadores e ver se da certo.
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)
@Matheus G.:
Sim é relativamente novo. Estranho, pq pra mim ele aparece no Firefox,no chrome e até no IEca8…
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 ?
@[ADM]Shot:
Muito obrigada pelo aviso. Já estou correndo atrás de resolver esse problema. Valeu!
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.
@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!
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/
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.
@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?
lol muito loko
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…
Hoooohooooo!!! Eu to apaixonada por CSS3!!!!
Ótima dica!
beijo da Mama?