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

Você está no BLOG do Maujor. IR PARA O SITE

Menu em abas com jQuery

Publicado em: 2008-11-17 — 31.856 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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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