Tutorial JQuery CSS – Aba superior com slide

Boa tarde ae!

Bom colocar um tutorial aqui bacana não sei direito o nome deste elemento mais acho ele bem útil e interessante vou colocar umas imagens da aba fechada e aberta é bem útil para colocar informações ou coisa do genero e deixa um efeito bem bonito no site

esta é a aba fechada

e esta é ela aberta a imagem tá bem tosquinha mais é só acessar o link que eu vou passar que vocês podem ver ela funcionando

bom é uma estrutura relativamente simples e o código também e fácil de fazer como todos os outros que eu tenho postado aqui

o código JQuery

$(document).ready(function(){//Aqui é como começa o código JQuery significa que quando o documento estiver carregado elefará as ações
$(“#aba-btn”).click(function(){//O evento que abre e fecha a aba
if (this.state!=1){//Se o estado da aba estiver diferente de 1
$(“#aba-btn”).animate({“marginTop”:”200px”},500,function(){//O botão da aba vai para baixo aqui no caso a aba tem 200 pixels de altura pode ser mais ou menos é só mudar aqui e embaixo tbm
$(“#aba-btn”).text(“Fechar aba”);//Aqui ele muda o texto para fechar caso você queira colocar uma imagem aqui mude para por exemplo “$(“#aba-btn”).hmtl(“<img src=’img-fechar.jpg’ />”);“
});
$(“#fundo-aba”).animate({“height”:”200px”},500); //A aba abaixa para 200 pixels que pode ser alterado mudando aqui no “200px”
$(“#conteudo-aba”).slideToggle(); //O conteudo aparece com um efeito de slide
this.state=1;//Iguala o estado a 1
}else{ //Se o estado for igual a 1
$(“#aba-btn”).animate({“marginTop”:”0px”},500,function(){ //O botão sobe
$(“#aba-btn”).text(“Abrir aba”);//O texto do botão muda para abrir novamente como eu coloquei no de cima caso você tenha colocado uma imagem ao inves do texto mude para por exemplo “$(“#aba-btn”).hmtl(“<img src=’img-abrir.jpg’ />”);“
});
$(“#fundo-aba”).animate({“height”:”0px”},500);//A aba fica escondida
$(“#conteudo-aba”).slideToggle();//E o conteudo também fica escondido com um efeito de slide de novo
this.state=0; //O estado é igualado a zero
}
});
});

o código css

#aba-btn{//Estilo do botão da aba
position:absolute;//Posição absoluta para ele ficar acima do conteudo do site a mesma coisa a div fundo-aba
z-index:1000;
left:0;//Mude aqui caso você queira que ele nao fique no canto da tela
font-weight:bold;
background:#f1f1f1;
padding:3px;
cursor:pointer;
}
#fundo-aba{//Aqui é o fundo da aba que vai tomar a tela inteira nada de especial no estilo como vocês podem ver
width:100%;
position:absolute;
z-index:1000;
left:0;
background:#f1f1f1;
}
#conteudo-aba{//Estilo para o conteudo da aba nada de mais também ele começa sem o display pq ele é exibido com o efeito
margin:0 auto;
width:700px;
display:none;
}

a estrutura HTML

<div id=”fundo-aba”> //Este é o fundo da aba que tem 100% de largura
<div id=”conteudo-aba”>//O conteudo que vai na aba
Aqui é uma aba de informações ou do que você precisar é bem útil e bem bonito o efeito
</div>
</div>
<div id=”aba-btn”>//Aqui é o botão da aba você pode colocar uma imagem aqui ou no conteudo da aba ai é só adaptar para o que você irá precisar
Abrir aba
</div>

para ver essa aba funcionando clique aqui

para baixar este código clique aqui

Até mais!

Tutorial JQuery CSS – Accordion simples e fácil

Boa tarde ae!

Esse tutorial vai ensinar como fazer um accordion bem fácil de se fazer

Aqui vai o código para o jquery

$(function(){
var pos=0; //Variavel que vai controlar o movimento de aparecer e esconder basicamente
$(“.pergunta”).click(function(){ //Evento do clique na pergunta
pos=this.state; //Igual a variavel ao estado do elemento
$(“.resposta”).hide(); //Esconde todos se por exemplo clicar em uma outra pergunta se outra já estiver aberta
if (pos !=1){ //Crivo para esconder e abrir
$(this).next().show(); //Aqui ele mostra a resposta o next() é para fazer com que a resposta que é a proxima imediamente apartir da resposta que foi clicada por isso aquela estrutura do html
this.state=1;  //Faz o estado do elemento ficar igual a 1
}else{ //O se não
$(this).next().hide(); //Esconde a resposta se você clicar numa pergunta que já esteja com a resposta aberta
this.state=0; //iguala o estado a zero para na próxima ele aparecer
}
});
});

A estrutura do html

<p class=”pergunta”>Como colocar conteudo no seu site</p> //Estrutura simple pergunta em cima e resposta a reposta começa escondida
<p class=”resposta”>Nada</p>
<p class=”pergunta”>Como colocar conteudo no seu site</p>
<p class=”resposta”>Nada</p>
<p class=”pergunta”>Como colocar conteudo no seu site</p>
<p class=”resposta”>Nada</p>

Essa foi o que eu usei para fazer um FAQ em um projeto que mostrarei mais adiante

Esse é o CSS

.resposta{
display:none; //Para fazer com que a resposta comece escondida
}
.pergunta{
cursor:pointer; //Isso é só para aparecer a mãozinha na pergunta para mostrar que é um link
}

O accordion é simples e funcional sem duvida eu estou usando ele agora ai é só personalizar colocar imagens se for necessario ou qualquer coisa do genero

Até mais!

Tutorial JQuery – Menu lateral com slider sobreposto

Bom dia ae

Postando mais um tutorial de JQuery com um menu lateral com slider que fica sobreposto ao conteúdo com slider para esconder e mostrar a caixa do menu.

Segue o código simples

$(function(){
$(“#botao”).click(function(){ //Evento de quando o usuário clica para mostrar ou esconder o menu
if (this.state != ’1′){ //Crivo de quando o menu esconde ou aparece
$(“#menu”).animate({“left”:”0px”},700); //Animação para o menu aparecer
$(“#botao”).animate({“left”:”120px”},700); //Animação para o botão seguir o menu
this.state=’1′; //Mudança do estado no próximo clique no botão ele ficará escondido
$(this).html(‘<img src=”imgs/seta_esq.gif” />’); //mudança da imagem do botão no caso uma seta agora para a esquerda
}else{ //O “se não” do crivo que agora irá esconder o menu
$(“#menu”).animate({“left”:”-129px”},700); //Animação para o menu ficar escondido
$(“#botao”).animate({“left”:”0px”},700);//Animação para o botãoficar no canto da tela
this.state=’0′; //Mudança do estado no próximo clique no botão ele aparecerá
$(this).html(‘<img src=”imgs/seta_dir.gif” />’);//mudança da imagem do botão no caso uma seta agora para a direita
}//Fechamento do crivo
});//Fechamento do evento
});

O html deste menu

<div id=’menu’>//Div agregadora do menu
<div id=’conteudo_menu’>//Div onde fica o conteudo do menu para poder dar um padding essas coisas
…
</div>//Fecha a div
<div id=’botao’><img src=’imgs/seta_dir.gif’ /></div>//Div onde fica o botão
</div>

O css deste Menu

a Id do botão

#botao{
margin:180px 0 0 129px;
width:38px;
height:41px;
float:left;
cursor:pointer;
}

A Id do menu

#menu{
width:180px;
height:395px;
position:absolute;
left:-129px;
margin:0;
top:30px;
background:url(../imgs/menu.gif) no-repeat left;
}

Bom é isso espero que seja útil

Até!