Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Menu em abas com jQuery

Publicado em: 2008-11-17 — 36.597 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 http://www.maujor.com/blog/2008/11/17/menu-em-abas-com-jquery/trackback no seu site.

12 comentários na matéria: “Menu em abas com jQuery”

  1. GustavoNo Gravatar disse:

    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.

  2. VictorNo Gravatar disse:

    Se eu passo o valor de ancora /#aba5 no link, ele imediatamente deveria abrir a aba 5, certo? Por que isto não funciona?

  3. MaujorNo Gravatar disse:

    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.

  4. Jaydson GomesNo Gravatar disse:

    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/

  5. maiconNo Gravatar disse:

    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

  6. SamiraNo Gravatar disse:

    Tem como fazer este mesmo tipo de efeito sem jquery, só em javascript mesmo. Eu consegui algo próximo, porém não funciona.

  7. MarceloNo Gravatar disse:

    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

  8. DaniloNo Gravatar disse:

    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 !

  9. Francisco dos SantosNo Gravatar disse:

    Grato, Maurício, pelo esclarecimento.

    [ ]s

  10. MaujorNo Gravatar disse:

    @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_abas do link clicado (a) e selecione seus filhos (children) com a classe (.aba:visible ou seja as abas abertas) e esconda-os (hide())

  11. Francisco dos SantosNo Gravatar disse:

    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

  12. JuraNo Gravatar disse:

    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.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo