Menu de navegação em abas dinâmicas com jQuery e CSS

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

Nesta pequena série de aulas irei ensinar para vocês como criar um sistema de navegação em abas usando jQuery e CSS. Tudo muito simples e de fácil entendimento para que todos possam acompanhar o assunto.

Dividi as aulas em 3 partes para ficar mais prático e objetivo. Depois de assistir não deixe de praticar o que foi ensinado e deixar seu comentário contando o que achou das aulas.



Script usado:

$(document).ready(function() {

	//Quando carregar a pagina
	$(".conteudo").hide(); //esta primeira linha servir para esconder as divs do contedo
	$("ul.menu li:first").addClass("active").show(); //Ativar primeira aba
	$(".conteudo:first").show('slow'); //abre a pagina suavemente

	//On Click Event
	$("ul.menu li").click(function() {// quando clicar no link do menu ir executar a seguinte funo:
		$("ul.menu li").removeClass("active"); //remove a class no link clicado para que no fica marcado
		$(this).addClass("active"); //adiciona a classe no link clicado para que o usuario saiba em qual link ele esta

		$(".conteudo").hide(); //esconder as divs do contedo
		var activeaba = $(this).find("a").attr("href"); //Encontrar o valor do atributo rel para identificar a aba que esta ativa + contedo
		$(activeaba).fadeIn('slow'); //efeito de fade in com o contedo ativo
		return false;// o returno falso evita que ao clicar no link a pgina role para o topo.
	});

});

Sobre o autor

Roberto Pereira

Sou desenvolvedor web, amante de tecnologia, gosto de disseminar conhecimento através de vídeo aulas e artigos.

Comentários

Atualmente temos 18 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • vladimir comentou em

    Como deveria proceder para incluir um menu com aba como o ensinado nessa aula, mas num tema em wordpress?

    Responder
  • ramon comentou em

    Parabéns por compartilhar o seu conhecimento nesse portal.

    Tenho acompanhado as videos aulas mas não encontrei o link para download dos arquivos da video aula. Tem como disponibilizar .

    At+

    Responder
  • Luiz F. S. Lima comentou em

    excelente video, um passo a passo bem auto explicativo, valeu. Só estou com duvida sobre os arquivos jquery..., não manjo muito e não estou conseguindo puxar o arquivo abas.js, pois as divs não estão sumindo. Vou estudando pra resolver isso, mas se tiver alguma dica fico agradecidissimo

    Responder
    • Luiz F. S. Lima comentou em

      ok, usei os scripts hospedado direto no diretório e funcionou, muito bom, estou tentando agora implementa-lo blog wordpress com um loop de posts para cada categoria(duas categorias uma em cada aba), se alguem tiver alguma indicação de como fazer essa implementação agradeço muito

      Responder
  • Daniel comentou em

    Parabéns pelas vídeo aulas, tem como voce upar o arquivo dos scripts e imagens da video aula? Eh bom para acompanhar.

    Valew

    Responder
  • Carla comentou em

    Parabéns pelas vídeo aulas

    foi muito util no desenvolvimento de um site para o meu trabalho..

    Obrigada,

    Continue assim

    Responder
  • Marcelo Gueddes comentou em

    Parabéns pela video aula, muito bem detalhada e consegui fazer direitinho,na verdade errei algumas coisinhas tipo 'aspas simples' onde deveria colocar "aspas duplas",comi uns pontos e virgulas(;) mas faz parte pra quem ta aprendendo.
    Mais uma vez obrigado Roberto Perreira pelo tempo dedicado.
    Um forte abraço!

    Responder
  • Olá colega parabéns pelos seus belíssimos posts, tenho aprendido e eusado muitas idéias suas no meu Blog, obrigado por compartilhar o seu conhecimento.

    Grande abraço!

    Responder
  • Alan comentou em

    Muito boa a video aula,você explica muito bem,mas acho que você precisa se soltar mais exemplo:parece que a cada três palavras tem 1000 pontos entende.Mas o resto ta tudo beleza,adorei a video aula,tive alguns probleminhas mas nada que não consegui resolver.Espero mais aulas suas até mais.

    Responder
  • Roberto Pereira comentou em

    Fala Marcos Antonio, tudo bem contigo?
    Primeiro gostaria de agradecer as palavras de incentivo, são os comentários e as críticas, que nos animam a cada jornada, melhorar a didática e o aperfeiçoamento do conteúdo na Rbtech

    Coincidência ou não, a aula de " Criando menus accordion com jQuery ", já esta saindo forno, logo após esta vídeo aula , Veja a imagem em gif: http://i56.tinypic.com/24niujd.gif, a sua aula ja esta agendada.

    Forte abraço

    Responder
  • Marcos Antonio comentou em

    Olá Roberto Pereira, é minha primeira visita ao site, e pelo que vi até agora, será a primeira de muitas, gostei muito do conteúdo, meus parabéns pelo belíssimo trabalho. Sabe, quando procuramos por esse tipo de conteúdo na net, muitas vezes nos deparamos com muita coisa ruim, sem profissionalismo, sem nexo, que ao invéz de ajudar acaba atrapalhando no aprendizado, o que não é o caso desse site. Aproveitando, gastaria de saber se aqui tem algo referente a menus accordion com jQuery, se tiver me indique, se não, fica um pedido. E mais uma vez, meus parabéns.

    Responder
  • Roberto comentou em

    Matheus Felipe obrigado pelo comentario, mais video aulas de qualidades estão chegando .
    Forte abraço

    Responder
  • Wagner Gilberto comentou em

    Com certeza vou gostar, ja tenho um que eu criei mas sempre é bom conhecer novos metodos e tecnicas e adicionar alguma coisinha pra incrementar, valeu pelas video aulas

    Responder

Deixe seu comentário