Estou lançando um novo plugin para jQuery: sliderMenu com apenas 4KB de JavaScript!
Não fiz o plugin sozinho, contei com a colaboração do Vitor Leal (visite o site dele), que preparou o CSS, as imagens e o HTML básico que é exibido no final. Fiquei responsável por todo o JavaScript além de alguns “position absolutes” e a idéia de o html inicial que vai montar o banner ser totalmente correto e útil em termos de SEO. A ideia é que a pessoa que montar o seu sliderMenu não perca créditos de SEO da sua página.
Você pode ver uma demonstração do plugin em http://www.balter.com.br/jquery/banner/ e também pode fazer o download do plugin em http://www.balter.com.br/jquery/banner/sliderMenu.zip.
Um novo exemplo: http://www.trilhavitoria.com.br/ também está utilizando o plugin e ficou bem bacana, visitem!
Edição: como o projeto é opensource disponibilizei o mesmo no github: http://github.com/leobalter/sliderMenu.
Os itens listados no sliderMenu não tem limite. A lógica para sua montagem é simples:
Ele é chamado como uma função jQuery para cada elemento que será transformado em um banner:
jQuery(function($) { $(elementos).sliderMenu(); });
Cada elemento a ser transformado em um banner é a princípio uma lista, no caso da demonstração, uma ul:
<ul class="slideMenu">
<li>
<h2><a href="#">Titulo do Post 1</a></h2>
<p>Texto do artigo 1.</p>
<img src="imagens/banner/imagem-1.jpg" title="Titulo da Imagem" alt="Banner" />
</li>
<li>
<h2><a href="#">Titulo do Post 2</a></h2>
<p>Texto do artigo 2.</p>
<img src="imagens/banner/imagem-2.jpg" title="Titulo da Imagem" alt="Banner" />
</li>
<li>
<h2><a href="http://www.google.com.br" target="_blank">Titulo do Post 3</a></h2>
<p>Texto do artigo 3.</p>
<img src="imagens/banner/imagem-3.jpg" title="Titulo da Imagem" alt="Banner" />
</li>
<li>
<h2><a href="#">Titulo do Post 4</a></h2>
<p>Texto do artigo 4.</p>
<img src="imagens/banner/imagem-4.jpg" title="Titulo da Imagem" alt="Banner" />
</li>
</ul>Assim você terá uma listagem que pode ser facilmente criada em qualquer CMS e a preocupação da montagem e lógica é por conta do plugin. Note que essa listagem é a que será lida por motores de busca e você não enfrentará grandes problemas de SEO.
Em termos de acessibilidade você também estará bem amparado. Esse html está apresentado de forma ideal para pessoas com deficiencia visual que necessitam de leitores especiais.
A lógica do plugin fica responsável por procurar semanticamente os títulos a imagem principal e o conteúdo. Você pode interpretar os mesmos respectivamente como elementos contidos em tags H1 a H6, elementos parágrafo (P) ou SPAN e o primeiro elemento IMG de cada item da lista que foi passada para o plugin.
Caso você queira que a lógica procure por elementos mais específicos, você pode especifica-los nas opções do plugin!
interval: 3000, titleSelector: 'h1, h2, h3, h4, h5, h6', contentSelector: 'p, span'
Basta passar esses parâmetros através de um objeto literal na hora de montar o plugin:
$(elementos).sliderMenu({interval:2000, titleSelector: 'h3', contentSelector: 'div.contentSelector'});
A opção interval controla o tempo (em milissegundos) do intervalo entre a mudança de cada item listado no sliderMenu.
As opções titleSelector e contentSelector passam seletores CSS de elementos filhos de cada “li” que devem ser utilizados respectivamente como seletor para o título e para o conteúdo de texto a ser exibido.
A ligação (link) para o artigo deve estar dentro de um desses 2 elementos.
Customizações de CSS são fáceis, pois deixei quase tudo no CSS próprio do plugin. Note que nessa folha de estilos não há um elemento selecionado por id. Fiz isso porque o sliderMenu pode ser criado em vários locais de uma mesma página, todos são independentes entre si.
Após abrir o arquivo .zip para download você vai encontrar uma cópia da demonstração, o arquivo css e 2 versões do plugin: uma comum e outra minimizada. O CSS não está minimizado para você poder ajusta-lo facilmente ao seu projeto.
