Menu Accordion com JQuery (sem plugin)

Quanto mais estudo mais eu gosto de jQuery, e as possibilidades de uso aumentam a cada leitura. 🙂

Resolvi aplicar jQuery na base (framework, huh?) que utilizo para as intranets de meus clientes e isso foi responsável por grande parte do meu aprendizado, estou aplicando também na nova versão do And After (resultado do meu TCC sobre usabilidade: análise heurística).

Desenvolvi os wireframes navegáveis do And After para fazer testes de navegação mais próximos do real possível e para isso utilizei menu accordion.

Não gosto de utilizar *muitos* plugins por três motivos principais:

  • Aumento do carregamento
  • Possível incompatibilidade
  • Falta de controle (somente em alguns casos)

 Porém não sejamos xiita, se existe algo pronto, bom, e que não irá atrapalhar o carregamento ou o funcionamento de nada, porque não utilizar? 🙂

 

Menu accordion com jQuery

Pouco código, simples e leve.

javascript

 

$(document).ready(function(){
$(´[rel="cont_autor"]:not(:first)´).hide();
$(´[rel="nav_autor"]´).click(function(){
     $(´[rel="cont_autor"]:visible´).slideUp("normal");
     $(this).next().slideDown("normal");
          return false;
});
});

A primeira linha apenas "dá start" no código, para ele ser carregado quando o documento estiver pronto.

Depois procuro os conteúdos dentro do meu menu (usando o atributo rel="cont_autor"), como vocês podem ver no html ali em baixo. Todos os conteúdos são escondidos, menos o primeiro, que por padrão estará sempre aberto no meu menu.

Quando clicar no item com atributo rel="nav_autor" então escondo todos os conteúdos visíveis utilizando o slideUp e pego o elemento depoisdo navegador (o conteúdo que está logo abaixo) e mostro ele utilizando o slideDown.

 

html

 

Últimos artigos do autor

Últimos comentários do autor

Últimas leituras do autor

Nesse caso usei h4 para definir os títulos e linhas de navegação, o correto é utilizar definition list (dl), mas meu objetivo aqui era apenas mostrar o funcionamento do menu independente da estruturação do html.

Simples e funcional, sem carregar nada desnecessário. 🙂

dicas

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *