O menu accordion é a opção da moda entre Web designers e designers de interface de usuário para sites que precisam mostrar uma grande quantidade de conteúdo em um espaço pequeno. O accordion oculta todo o conteúdo exceto uma seção. Quando o mouse passar sobre um item específi co ou este for clicado, o conteúdo associado a esse item é expandido para ser exibido ou se contrai para fi car oculto. Os accordions podem ser empregados em elementos de navegação, mas recentemente também têm sido usados para fi nalidades relacionadas ao conteúdo, como grandes quantidades de conteúdo em espaços pequenos. Magento, plataforma de e-commerce de código aberto, implementou um processo de compra com estilo accordion, como mostra a Figura 6-8.
Clique para que o conteúdo oculto seja exibido
Figura 6-8: Os sites da Magento usam processo de compra com estilo accordion
Nesta seção, apresento um tutorial que mostra como confi gurar um accordion vertical, que pode ser usado para uma barra lateral de navegação do site. O accordion tem sempre uma seção de conteúdo aberta enquanto o resto permanece fechado. Os elementos de cabeçalho exibem um ícone que ajuda a mostrar ao usuário qual seção de conteúdo está aberta ou fechada.
1. A primeira tarefa é defi nir a estrutura HTML do menu accordion. O objetivo é criar uma estrutura de código clara, fácil de ser confi gurada e mantida com a jQuery. A estrutura HTML precisa de dois elementos: um elemento de cabeçalho do accordion e um elemento de conteúdo do accordion. O elemento de cabeçalho recebe uma classe do cabeçalho do accordion e é colocado entre as tags H3, que exibem o texto do cabeçalho. O cabeçalho é o elemento clicado para mostrar ou ocultar o conteúdo sob ele. O elemento de conteúdo é confi gurado como uma lista não ordenada e recebe uma classe accordion-content.
Ele contém os elementos mostrados ou ocultos à medida que clicamos em cada cabeçalho. <div id="accordion"> <div class="accordion-header"> <h3>Books</h3> <span></span> </div> <ul class="accordion-content"> <li><a href='#'>Business</a></li> <li><a href='#'>Education</a></li> <li><a href='#'>Tech</a></li> <li><a href='#'>Romance</a></li> </ul> <div class="accordion-header"> <h3>Electronics</h3> <span></span> </div> <ul class="accordion-content"> <li><a href='#'>Audio</a></li> <li><a href='#'>Video</a></li> <li><a href='#'>Automobile</a></li> <li><a href='#'>Appliances</a></li> </ul> <div class="accordion-header"> <h3>Sporting Goods</h3> <span></span> </div> <ul class="accordion-content"> <li><a href='#'>Baseball</a></li> <li><a href='#'>Basketball</a></li> <li><a href='#'>Football</a></li> <li><a href='#'>Tennis</a></li> </ul> </div>
2. A seguir, confi guramos uma folha de estilo para garantir que o accordion será disposto corretamente na página. De forma semelhante a outros tutoriais, um CSS reset é adicionado:
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fi eldset, input, textarea, p, blockquote, th, td{margin:0; padding:0}
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal}
3. A CSS restante controla a aparência do menu accordion. Confi guraremos diferentes estilos para os elementos de menu e conteúdo. O item de menu inclui um ícone que exibe o menu que tiver sido selecionado.
O ícone do menu é confi gurado com a utilização de um sprite. Um sprite é uma maneira de criar uma imagem grande que pode ser aplicada a diferentes elementos em um site com a utilização do posicionamento do segundo plano. A principal vantagem da utilização de
Web por imagens, o que aumenta o desempenho e diminui os tempos de carregamento. Perceberemos a vantagem se estivermos utilizando mais de 20 imagens. Além disso, os sprites combatem a oscilação do carregamento de imagens, que ocorre quando criamos uma rolagem com duas imagens separadas e a imagem onhover ainda não tiver sido carregada.
#accordion{ width:225px; margin:10px 0 10px 10px; } #accordion .accordion-header{ background:#3971AC; color:#fff; border-bottom:1px solid #fff; position:relative; } #accordion .accordion-header h3{ margin:0; cursor:pointer; text-indent:10px; padding:5px 0; } #accordion .header-active{ background:#48ABC3; }
#accordion .accordion-header span{
background:url(../images/accordion_sprite.gif) no-repeat; display:block; position:absolute; width:11px; height:12px; top:5px; left:200px; }
#accordion .accordion-header span.icon-active{
background:url(../images/accordion_sprite.gif) no-repeat; background-position:0 -12px; display:block; position:absolute; width:11px; height:12px; top:5px; left:200px; } #accordion ul.accordion-content{ margin:0px 0 0px 0; padding:5px 5px 10px 5px; list-style-type:none; background:#A8D7E2; }
#accordion ul.accordion-content li{ padding:1px 0px; display:block; margin:0; padding:2px 5px; } #accordion ul.accordion-content li a{ color:#D16C3A; }
4. Após o carregamento da página, certifi que-se de que apenas o primeiro elemento do menu e o elemento de conteúdo estão sendo exibidos. A declaração jQuery a seguir oculta todas as instâncias do accordion-content (elemento de conteúdo) que não são o primeiro elemento, usando uma combinação do método not() e do fi ltro :fi rst.
$('.accordion-content').not(':fi rst').hide();
O método not() fi ltra qualquer elemento ou seletor que se encaixa no perfi l usando o seletor que o antecede, o que pode ser feito na forma de um fi ltro, como visto neste exemplo, ou podemos passar um elemento específi co a ele, como no exemplo do passo seguinte:
5. Após termos ocultado todas as instâncias do accordion-content que não são o primeiro elemento, criamos outra declaração para aplicar o efeito show a apenas o
primeiro elemento accordion-content:
$('.accordion-content:fi rst').show();
6. Para criar um item de menu selecionado ou ativo, adicionamos uma classe ao arquivo CSS chamada header-active. Aplicamos essa classe ao primeiro accordion-header
usando a seguinte declaração:
$('.accordion-header:fi rst').addClass('header-active');
Também adicionei ícones ao menu accordion e utilizei tags span vazias para colocar os ícones no cabeçalho. Confi gurei uma classe chamada icon-active que mostra uma seta para baixo notifi cando o usuário sobre a seção do conteúdo aberta. Quando a classe
icon-active não está aplicada, a seta para a direita é exibida usando a tag span.
Com o fi ltro :fi rst, selecione o primeiro elemento accordion-header e, a seguir, encadeie o método fi nd para pesquisar a tag span e adicionar a classe icon-active.
$('.accordion-header:fi rst').fi nd('span').addClass('icon-active');
7. Agora começa a diversão: fazer o accordion reagir a uma interação do usuário. Anexe um evento click ao elemento de menu accordion-header.
$('.accordion-header').click(function () { });
8. A primeira declaração que é adicionada à função do manipulador do evento click serve para assegurar que todos os itens já clicados se retraem e qualquer classe active é removida. Podemos fazer isso selecionando qualquer instância visível de accordion-content e aplicando o efeito slideUp a ela. A seguir, usamos o método prev para retornar um elemento na árvore do DOM, que neste caso é o accordion-header, e remover a classe
$('.accordion-header').click(function () {
$('.accordion-content:visible').slideUp('slow').prev(). removeClass('header-active');
});
O método prev() permite a pesquisa de fi lhos anteriores no DOM, e é possível também passar um seletor ('.active') para o método como um argumento.
9. Adicione uma declaração para garantir que todos os elementos icon-active visíveis fi quem ocultos removendo a classe icon-active.
$('.accordion-header').click(function () {
$('.accordion-content:visible').slideUp('slow').prev(). removeClass('header-active');
$('.icon-active:visible').removeClass('icon-active'); });
Observação: Um aspecto importante que deve ser lembrado é que os métodos addClass(),
removeClass() e hasClass() não precisam de ponto na passagem dos nomes de classes para eles. Geralmente esse fato é ignorado, podendo criar erros nos scripts jQuery; porém, os métodos is(), fi lter() e not() precisam que o ponto seja incluído antes do nome da classe.
10. Insira uma declaração que seleciona o cabeçalho clicado usando a palavra-chave this
e adicione a classe header-active. A seguir, escolha o próximo elemento por meio do método next() e deslize para baixo lentamente.
$('.accordion-header').click(function () { $('.accordion-content:visible').slideUp('slow').prev(). removeClass('header-active'); $('.icon-active:visible').removeClass('icon-active'); $(this).addClass('header-active').next().slideDown('slow'); });
O método next() é o contrário do método prev(). Em vez do irmão anterior, esse método retorna o irmão seguinte.
11. A declaração fi nal adicionada dentro da função do manipulador do evento click usa a palavra-chave "this" com o método fi nd para adicionar a classe icon-active à tag
span encontrada dentro do elemento accordion-header.
$('.accordion-header').click(function () { $('.accordion-content:visible').slideUp('slow').prev(). removeClass('header-active'); $('.icon-active:visible').removeClass('icon-active'); $(this).addClass('header-active').next().slideDown('slow'); $(this).fi nd('span').addClass('icon-active'); });
Se você trabalha com um site ou aplicativo que adiciona dinamicamente elementos de menu e conteúdo ao accordion, certifi que-se de alterar o método de atribuição do evento click
de bind para live. Caso contrário, o evento click não registrará os novos elementos adicionados ao DOM depois do carregamento da página.
Após obter todo o HTML, CSS e jQuery e carregar a página em um navegador, o accordion deve estar completo, como mostra a Figura 6-9.
Figura 6-9: O script do accordion no Firefox, com o painel do Firebug aberto para podermos ver tudo
O script do accordion ajuda na exibição de uma grande quantidade de conteúdo em um espaço pequeno, mas ele tem suas limitações, incluindo:
À medida que adicionamos itens de menu ao accordion, precisamos descer mais a página para selecionar ou visualizar o conteúdo incorporado a esses itens. Se utilizarmos um accordion em um aplicativo real, essa limitação pode restringir bastante a interface do usuário, o que poderá diminuir a praticidade ou até mesmo as vendas e conversões, caso seja um site de e-commerce.
O accordion não se lembra da seção de conteúdo na qual estávamos se a página for atualizada, embora esse tipo de funcionalidade possa ser confi gurada com a utilização de cookies e de jQuery. Há também uma técnica melhor e sem cookies que envolve a utilização de âncoras e a manipulação de query strings, sobre a qual há mais informações
no blog de Rebecca Murphey (http://blog.rebeccamurphey.
com/2007/12/04/anchor-based-url-navigation-with-jquery/).
A localização da seção do accordion não pode ser salva em Favoritos. Se chegarmos a uma página e a salvarmos como favorita esperando que o accordion permaneça aberto nessa seção, ele não fi cará. A solução seria confi gurar âncoras como mencionado no parágrafo anterior.
Se o seu público não for experiente em Internet, ele pode não conhecer os accordions e, portanto, não saberá como eles funcionam.