Publicado em 1 de set.

[Resolvido] Conteúdo com abas e barra de login que desce com a pá

Boa noite gente,

tenho um cliente que me pediu para fazer um site que na <div> que adiciono o conteúdo ele quer um "quadro" com abas, como o daqui do fórum, ele quer que ao selecionar a aba ela fique selecionada (óbvio) e ele não quer que carregue uma nova página ao selecionar a aba o conteúdo se carregue na mesma página, não sei se esse é o trabalho dos programadores que estão na minha equipe. segue a imagem para exemplificar o que estou em dúvida abaixo (fiz no paint mesmo, só para exemplificar):

/applications/core/interface/imageproxy/imageproxy.php?img=http://img152.imageshack.us/img152/3275/abasp.jpg&key=a076544a07bd6081f416570e8738bf6c04eb56ffd5284f5a5404c5cba0ba4860" alt="abasp.jpg" />

Outra coisa que se puderem me ajudar seria ótimo, é sobre como fazer um botão de login que segue a barra de rolagem e só se abre quando passar o mouse em cima dele, e então aparece os <forms> de login e senha funcionais.

Agradeço a todos antecipadamente pela paciência e pelas respostas

Obrigado.

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Fernando Neto MH· 1 de set.

Olá amigo achei alguns na net olha ai

http://jqueryui.com/demos/tabs/default.html

http://css-tricks.com/examples/OrganicTabs/

http://www.sunsean.com/idTabs/

http://webdesignledger.com/tutorials/11-useful-jquery-tab-navigation-solutions

WilkerIceri· 1 de set.

Bom tem alguns plugings que fazem isso para você, mais caso queira fazer no braço não é dificil.

Faça mais ou menos assim:

<script type="javascript">
function troca(valor) {
 cont1 = document.getElementById('cont1');
 cont2 = document.getElementById('cont2');
 cont3 = document.getElementById('cont3');
 if (valor == 1) {
 cont2.style.display = "none";
 cont3.style.display = "none";
 cont1.style.display = "block";
 } else if (valor == 2) {
 cont1.style.display = "none";
 cont3.style.display = "none";
 cont2.style.display = "block";
 } else {
 cont1.style.display = "none";
 cont2.style.display = "none";
 cont3.style.display = "block";
 }
}
</script>

<ul>
<li onclick="troca(1);">Conteudo um</li>
<li onclick="troca(2);">Conteudo dois</li>
<li onclick="troca(3);">Conteudo tres</li>
</ul>

<div id="cont1"></div>
<div id="cont2" style="display: none;"></div>
<div id="cont3" style="display: none;"></div>

Ai depois da pra você usar umas funções jQuery para dar um efeito de opacidade ou slide nas imagens, fazendo mais ou menos assim:

Sem jQuery:

cont1.style.display = "none";
cont2.style.display = "none";
cont3.style.display = "block";

Com jQuery:

$("#cont1").fadeOut().css("display","none");
$("#cont2").fadeOut().css("display","none");
$("#cont3").fadeIn().css("display","block");

xRicardoBH· 3 de set.

>
Olá amigo achei alguns na net olha ai

http://jqueryui.com/demos/tabs/default.html

http://css-tricks.com/examples/OrganicTabs/

http://www.sunsean.com/idTabs/

http://webdesignledger.com/tutorials/11-useful-jquery-tab-navigation-solutions

Muito obrigado pelos links já vi coisas ai que irão me ajudar demais!!

Obrigado mesmo!

Fernando Neto MH· 3 de set.

Por nada estamos aqui para se ajudar