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 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.

DEMO

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.



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.

21 Comentários

  1. Thayna disse:

    Esse site me ajuda muito , agradeço muito a quem publica esses posts

  2. Maria rocha disse:

    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?

  3. .:: Nessa ::. disse:

    Paulo,
    infelizmente o internet Explorer é uma nhaca…

  4. Paroquia de São Miguel Arcanjo disse:

    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

  5. João disse:

    ola clau!
    o que gostaria de perguntar, era se da para meter este tipo de menu nas abas por exemplo…
    Espero uma resposta obrigado

  6. .:: Clau ::. disse:

    Ivan
    Não sei te informar.

  7. Ivan Caratanasov disse:

    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!

  8. .:: Clau ::. disse:

    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á.

  9. .:: Clau ::. disse:

    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.

  10. Taillard disse:

    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!

  11. Lukas disse:

    Clau,gostei muito daquele menu que você fez no template blood dark,como fez?

  12. .:: Clau ::. disse:

    Taillard
    Ah eu já vi sim, é realmente muito bom. Obrigada pela dica querida. Volte sempre!

  13. Taillard disse:

    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!

  14. ::Clau:: disse:

    @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.

  15. santiagoregis disse:

    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

  16. Joao Bob disse:

    Muito boa essa opção..

  17. ::Clau:: disse:

    @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.

  18. webprincipiante.com disse:

    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!

  19. ::Clau:: disse:

    @webprincipiante.com:
    O melhor de tudo é q não precisa de scripts =)

  20. webprincipiante.com disse:

    Agora sim quem quiser ter um menu para ocupar menus espaço,vou testar…

    ABraços!

    Atenciosamente
    Rafael

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

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