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
- Utilize a Google Ajax Libraries API para carregar o jQuery