Menu em abas com jQuery
Publicado em: 2008-11-17 — 36.804 visualizacoes
Inspirado em uma matéria publica por Guilherme Rambo desenvolvi um menu em abas do tipo revela conteúdos usando a biblioteca jQuery.
O Guilherme, autor da matéria na qual me inspirei, postou um fragmento de código sem estilizações e desprovido de qualquer cuidado com a acessibilidade, usando inclusive script in-line. E, certamente a intenção do Guilherme foi instigar seus leitores a pesquisar e modificando seu código torná-lo usável.
Ele usou um aproximação bastante interessante construindo fragmentos identificadores terminados com números (tipo: <a href="aba2">Aba2</a>) o que permite simplificação no script, pois possibilita usar o métodp jQuery index(seletor) para reter o índice do elemento clicado e modificar o número final do framento que aponta para o link.
O resultado final do menu que desenvolvi pode ser visto neste link onde você encontra os códigos usados.
Fique à vontade para comentar, sugerir e perguntar.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2008-11-17 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2008/11/17/menu-em-abas-com-jquery/trackback no seu site.
Muito legal! Já tinha visto o artigo no sreencaster mas ainda não consegui resolver o meu problema. Preciso de um menu em abas como esse mas tem que haver quebra de linha no texto da aba, so que dai não consigo deixar o css no jeito. Tem como ou teria que usar outra alternativa ao href?
Obrigado pela atenção,
Gustavo Ferreira.
Se eu passo o valor de ancora /#aba5 no link, ele imediatamente deveria abrir a aba 5, certo? Por que isto não funciona?
Jaydson
Bem observado.
Contudo, pelo fato de uma biblioteca facilitar determinada tarefa não significa que devemos usá-la.
Antes de tudo é preciso analisar se vale a pena carregar a biblioteca para cumprir a tarefa.
Dependendo do projeto é mais vantagem desenvolver um script personalizado.
No caso do menu em abas, se jQueryUI vai ser carregada somente para simplificar a implementação do menu no site, então é melhor usar um script como o mostrado na matéria.
Acho interessante mostar para o pessoal iniciante como fazer um menu em tabs, porém acho útil ressaltar que esta funcionalidade já existe na jQuery UI.
É bem simples de implementar, simples mesmo:
$(“#tabs”).tabs();
Pronto. Com isso ta feito o menu em abas.
http://jqueryui.com/demos/tabs/
Cara, eu sou seu maior fan, suas dicas de CSS me ajudaram bastante, você foi sem saber um dos melhores professores que já tive, muito obrigado mesmo.
Abraço
Tem como fazer este mesmo tipo de efeito sem jquery, só em javascript mesmo. Eu consegui algo próximo, porém não funciona.
Estou começando no ramo da web, mas por que admiro e amo a criação de sites, estou pela primeira vez agradecendo e parabenizando
o Maurício pelo excelente trabalho, e pelos seus tutoriais maravilhosos
nunca fiz um curso, porém com os tutoriais produzido pelo Maurício consegui desenvolver algum simples sites e abriu minha visão a “.css”
agora estou tentando o css + java script , hoje tentei pela primeira vez aquele menu com abas e nao consegui mas vou tentar mas, mais tarde tento de novo leio com mais atenção,
Parabéns pelo trabalho e essa força que voçê nos da com seus tutoriais, recomendo a todos.
So peço uma coisa, eu sou do recife tenho 18anos admiro seus trabalhos e gostaria de comprar uns livros desses do maujor e gostaria de saber se não teria alguma revendedora por aqui pelo recife, e algum amigo seu que de aula de TI pois estou ansioso para começar e preciso de uma recomendação, Thx
Olá amigos,
Realmente a biblioteca facilitou e simplificou muito a vida dos designers que se interessam por javascript não obstrusivo.
Parabéns pelo artigo !
Grato, Maurício, pelo esclarecimento.
[ ]s
@Jura
Sim, as abas podem ser figuras tal como se constroem abas com CSS e figuras sem jQuery.
@Francisco
A linha que você tem dúvida destina-se a fechar uma aba aberta quando o usuário clica para abrir outra e diz o seguinte:
Encontre o elemento ancestral (
parents) cuja ID écontainer_abasdo link clicado (a) e selecione seus filhos (children) com a classe (.aba:visibleou seja as abas abertas) e esconda-os (hide())Olá! Maurício, tudo bem?
É possível você comentar cada linha do jQuery, do exemplo acima?
Parte do código consegui entender, mas com relação ao
$(this).parents(‘#container_abas’).children(‘.aba:visible’).hide();, ainda tenho dúvidas.
[ ]s
Tem como as abas terem formato com imagens ???
Exemplo: http://www.cssplay.co.uk/menus/overlap.html
Parabens pelo artigo, estarei no lançamento do Livro no encontro de ti aqui no RJ, e espero poder adquirir o livro.