Boa noite ae
Bom primeiro tutorial que eu coloco aqui de JQuery que é bem util rs pra quem é tipo eu que não gosta de js, bom quem trabalha com web deve já ter precisado de um jeito para fazer navegação em abas essa foi uma forma fácil que eu fiz com JQuery bem indolor e tranquila. Pra mim JQuery e CSS são do Piru
O bloco de código é simples algumas linhas somente
$(function(){
var parte=0; // Variavel que recebe a largura de cada parte da aba definida no css e passada para cá manualmente
var pos=0; // Variavel que definira a posição do fundo da aba
$(“.menu_parte”).click(function(){ //evento de clique na aba
pos=this.title*parte; // Calculo para a posição que o fundo da aba assumirá quando o evento acontecer
$(“#slider_total”).animate({“marginLeft”:”-”+pos+”px”},3000); //Movimentação do fundo da aba
});
});
A classe ‘.menu_parte’ são as abas propriamente ditas elas precisão ter o parametro ‘title’ definindo a posição dela iniciando do zero como é normalmente na vida rs. O id ‘#slider_total’ é literalmente o “fundo” da aba onde serão postas as partes que precisão ter uma largura definida e explicita na variavel ‘parte’ como eu comentei no bloco de código.
O css é simples seguindo esta estrutura
<div id=”menu_slider”>// A div agregadora das abas
<span class=”parte_menu” title=”0″>// as abas seguindo a numeração do parametro title podendo ser quantas for necessario
</span>
….
</div>
<div id=”caixa_slider”>//Uma caixa para as partes da aba
<div id=”slider_total”>//O ‘fundo’ das abas com uma largura bem grande
<div class=”parte_slider”>//A primeira parte das abas o interessante para o layout é ela ter a mesma largura da caixa (a primeira div) para ser realmente bonito e lembrando da largura dessa div ser explicita no código da jquery
<div class=”conteudo_parte”>//uma div para colocar o conteudo na parte da aba caso queira dar um padding sem afetar o resto da aba
….
</div>
</div>
</div>
</div>
Bom é isso o primeiro tutorial qualquer duvida problema ou qualquer outra coisa espero um comentário.
Até!
