Menus Vanessa S.
Menu em Abas com CSS
Com as novas técnicas em aplicações CSS3, podemos desenvolver vários efeitos que antes só eram possíveis com o uso de javascript.
Usando as propriedades CSS, é possível criar um menu em abas, sem o uso de javascript, tal qual você pode conferir no artigo, onde eu ensino a instalar um Menu em abas deslizante com JQuery.
Neste tutorial você vai aprender a criar um menu em abas, usando apenas aplicações CSS, sem nenhum arquivo javascript, de forma simples, rápida e fácil.
Principais vantagens de usar o menu em abas apenas em CSS:
– É excelente para blogs que possuem muitos script, porque você não precisa se preocupar com conflitos de javascript.
– Funciona em todos os navegadores (é claro que no IEca pode ocorrer eventual problema, como de praxe, dependendo do template).
1º passo: Definir os estilos:
Vá em “Editar HTML”, (não precisa clicar em ‘Expandir modelos de widgets’), e cole o seguinte código logo ACIMA da tag ]]></b:skin>
/* Menu em Abas CSSTabs
--------------------------- */
#csstabs {
height: 280px; / * altura total da área * /
margin:0 auto;
position:relative;
width: 100%;
}
#csstabs h3 { /* títulos das abas */
color: #000;
cursor: pointer;
display: block;
font-size: 15px;
font-weight: bold;
height: 25px;
margin: 0;
padding: 5px 5px 5px 5px;
text-align: left;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
}
.tabcontent { /* conteúdo das abas */
display: block;
height: auto;
width:100%;
padding:15px 0 5px 0px;
border:1px solid #000;
}
#csstabs:hover h3, #tabs:focus h3, #tabs:active h3 {
z-index: 0;
background:none;
}
#csstabs:hover .tabcontent, #tabs:focus .tabcontent, #tabs:active .tabcontent {
opacity: 0;
z-index: 0;
}
#tab1 .tabcontent {
background-color: #ddd;
position:absolute;
left:0;
top:35px;
height: 200px; /* altura total do conteúdo da aba 1 */
z-index: 2;
}
#tab1 h3 {
left: 0;
position: absolute;
top: 0;
z-index: 3;
background-color: #ddd;
}
#tab1:hover h3, #tab1:focus h3, #tab1:active h3 {
background-color: #ddd;
color: #565A63;
z-index: 4;
}
#tab1:hover .tabcontent, #tab1:focus .tabcontent, #tab1:active .tabcontent {
opacity: 1;
z-index: 3;
}
#tab2 .tabcontent {
background-color: #E6EAF3;
height: 200px; /* altura total do conteúdo da aba 2 */
opacity: 0;
top:35px;
z-index: 1;
position:absolute;
}
#tab2 h3 {
left: 120px;
position: absolute;
top: 0;
}
#tab2:hover h3, #tab2:focus h3, #tab2:active h3 {
background-color: #E6EAF3;
color: #565A63;
z-index: 4;
}
#tab2:hover .tabcontent, #tab2:focus .tabcontent, #tab2:active .tabcontent {
opacity: 1;
z-index: 3;
}
No código acima, algumas partes estão destacadas, pois estas deverão ser editadas por você, como cores, bordas, largura e altura. Edite de acordo com as medidas e cores de seu template. Vá editando e visualizando até ficar da maneira que você quiser.
2º passo: Incluir o menu em abas no html do template:
O Código HTML é muito simples e você poderá inclui-lo onde quiser, inclusive na sidebar, que na minha opinião, é o melhor local para este tipo de menu.
Vá até ‘Layout’ ? Clique em ‘Adicionar um elemento de página’? Escolha tipo ‘HTML/Javascript’ e cole o seguinte código lá:
<div id="csstabs">
<div id="tab1">
<h3>TITULO ABA 1</h3>
<div class="tabcontent">
....Coloque o conteúdo....
</div>
</div>
<div id="tab2">
<h3>TITULO ABA 2</h3>
<div class="tabcontent">
....Coloque o conteúdo....
</div>
</div>
</div>
Salve!
Agora é só inserir o conteúdo no local indicado no código, como Links, textos, imagens, ou o que você preferir.
Use a imaginação!
Se quiser incluir outra aba basta incluir mais uma condicional no código:
<div id="tab3">
<h3>TITULO ABA 3</h3>
<div class="tabcontent">
....Coloque o conteúdo....
</div>
</div>
Para cada aba que quiser incluir é só sempre repetir este trecho e sempre colá-lo antes da última </div>
Mas preste atenção nas medidas da sua sidebar, se incluir muita aba, pode ser que o menu fique desconfigurado, não esqueça que você deve sempre respeitar a largura total da sua sidebar.
Esse site me ajuda muito , agradeço muito a quem publica esses posts
Vanessa,
preciso da sua ajuda, montei um blog com abas no menu, mas não consigo de forma alguma publicar nas abas como faço?
Siga o 2º passo do tutorial.
Paulo,
infelizmente o internet Explorer é uma nhaca…
Clau, sei de suas ocupaçoes, mas por favor me ajude.
Coloque um menu dropdow em: http://www.paroquiademiguelalves.com
No Internet explorer as abas ficam por baixo das postagens. Nos demais funcionam bem. O que poderá ter acontecido. Veja se pode me ajudar. Deus aproteja. Paulo.
ptavaryz@ig.com.br
ola clau!
o que gostaria de perguntar, era se da para meter este tipo de menu nas abas por exemplo…
Espero uma resposta obrigado
Ivan
Não sei te informar.
como faço para que quando eu clicar na aba 2 ele permaneca na 2 até que eu clique em outra, por ex: a aba 3 que eu criar e ele fique na 3 até que eu clique em outra?
Valeu!
Lukas
Por favor, procure deixar comentário com assunto relacionado ao post em questão. Esse comentário vc poderia ter deixado no post que está publicado o template e não aqui!
Mas respondendo a sua pergunta: esse menu foi criado pelo Sothanaka, no próprio post tem o link pro site do criador do menu, visite o site dele e dê uma verificada lá.
Taillard
Isso querida, faça testes sim! Tente incluir posição "center" então. É só uma sugestão, eu não testei pra ver,ok?
Para falar a verdade, qdo eu fiz esse menu em abas eu fiz apenas com 2 abas e deu certo, tanto q tem o link do demo pro pessoal verificar como ficou…agora em relação a inclusão de outra aba, eu nunca tentei e nem testei.
Ai vai de cada um tentar e fazer testes.
Quando eu crio algum tutorial, eu procuro me basear nas medidas dos templates padrões do Blogger,pq não há como eu saber a medida de sidebar de cada leitor do MB, então me baseio sempre pelos modelos de templates padrões, disponibilizo o código para que os próprios leitores façam modificações se quiserem.
Se der certo, volta aqui pra nos contar tá?
Beijos.
Clau ola querida!
Esta impossivel encluir uma 3ª aba no codigo apenas do html,sem mexer no css rainha.
E quando você enclui mais uma no css,um titulo sobre em cima do outro,pois a posição left e right,se igualam rainha.
Vou tentar usar ou melhor repetir o codigo dentro do mesmo html,para ver se consigo o efeito desejado que é um menu com imagens.
Brigadão amiga!
Em breve entro em contato para encomendar algumas imagens fantasticas criadas por tu.
Beijão!
Clau,gostei muito daquele menu que você fez no template blood dark,como fez?
Taillard
Ah eu já vi sim, é realmente muito bom. Obrigada pela dica querida. Volte sempre!
Amiga querida vou tentar novamente colocar esse menu,em um blog de um amigo!
De qualquer forma deixo uma dica sobre css e suas funcionalidades.
O Blog da Gem@ tem um link que leva ao CSS/Play com mais de 100 modelos de menu em css,porém em ingles e não há tutoriais assim ,tão didáticos ou publicos como os blogs brasileiros e latinos no geral.
Beijo grande Clau!
@santiagoregis:
Para incluir outra aba basta incluir mais uma condicional no código:
<div id="tab3">
<h3>TITULO ABA 3</h3>
<div class="tabcontent">
….Coloque o conteúdo….
</div>
</div>
Para cada aba que quiser incluir é só sempre repetir este trecho e sempre colá-lo antes da </div> final.
Mas preste atenção nas medidas da sua sidebar, se ioncluir muita aba, pode ser que fique desconfigurado, pois vc deve sempre respeitar a largura total da sua sidebar, não esqueça.
Olá Clau
pra fazer mais de 2 abas é só repetir o conteúdo de umas das abas no css? tô tentando fazer mais de duas abas mas n consigo… pode me ajudar?
abraços
Muito boa essa opção..
@webprincipiante.com
Eu não sei o q deve ter acontecido, pois eu olhei o demo com o IE8 e lá está funcionando normalmente. No seu caso pode ter ocorrido algum erro com outro elemento que acabou gerando erro em outros…eu acho.
Não sei como te ajudar.
OLá Clau!
A cada dia que passa fico com mais raiva do IE8,no começo está tudo bem com o menu agora quando fui olhar hoje ele estava saindo para fora da coluna do widget e então tive que tirar,agora do nada todo meu blog o conteudo fica centralizado não sei porque (e cada bug) e não alterei nada,você saberia medizer o que ocorreu?haja paciência!!!
Abraço!
@webprincipiante.com:
O melhor de tudo é q não precisa de scripts =)
Agora sim quem quiser ter um menu para ocupar menus espaço,vou testar…
ABraços!
Atenciosamente
Rafael