O site já esta pronto, aquela lista de conteúdos relacionados (geralmente localizada na coluna direita) está funcionando perfeitamente. Porém o Designer faz uma proposta de melhoria de usabilidade, solicitando que não apenas o link do título seja clicável, mas o item da lista por inteiro (tag <li>). Como resolvemos esse problema?
Demo do resultado.
Para melhor entendimento, vejamos primeiramente o código XHTML abaixo:
<ul class="lista_script"> <li><h3><a href="index.html">Título da notícia relacionada</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat mauris et leo congue in fermentum neque volutpat. Aenean dignissim leo eu erat suscipit id condimentum mi adipiscing</p> </li> <li><h3><a href="index.html">Título da notícia relacionada</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat mauris et leo congue in fermentum neque volutpat. Aenean dignissim leo eu erat suscipit id condimentum mi adipiscing</p> </li> <li><h3><a href="index.html">Título da notícia relacionada</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat mauris et leo congue in fermentum neque volutpat. Aenean dignissim leo eu erat suscipit id condimentum mi adipiscing</p> </li> </ul>
Antes da prática de se trabalhar com DOM (javascript), esse problema era resolvido da seguinte forma, colocava-se a tag <a> como pai da <li>, o que não é semanticamente correto. Pois a tag <a> é do tipo inline e <li> do tipo block . Segundo as recomendações do W3C os elementos do tipo inline devem está contidos dentro de elementos block , logo não é válido declarar block dentro de inline .
A solução encontrada foi resgatar, via jquery, o atributo “href” da primeira tag <a> e adicionar o evento click na <li>. Para complementar o script criei um efeito hover na <li> que pode ser personalizado na classe “.hover” no CSS.
O resultado:
CSS
* { margin: 0; padding: 0} ul { list-style: none} //reset
body { font-family: "Trebuchet MS", Arial; font-size: 12px}
.lista_script li {
border-bottom: 1px solid #e1e1e1;
padding: 10px
}
.lista_script li h3 {
margin-bottom: .7em;
font-size:14px
}
.lista_script .hover { background-color: #ececec}
.lista_script li {cursor: pointer}
Javascript (jquery)
Não esquecer de colocar dentro da tag <head>.
$(document).ready(function() {
//função efeito hover
$(".lista_script li").hover(function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
});
//função click
$(".lista_script li").click(function() {
var destino = $(this).find("a:first").attr("href");
//resgatando link da primeira tag "a" dentro da "li"
window.location = destino;
});
});
Vantagens
- Executa as funções do jquery via DOM, desta forma não é necessário adicionar novos atributos nos elementos do XHTML.
- XHTML acessível, pois mesmo que o browser não tenha suporte a javascript o usuário poderá utilizar o link do título normalmente.
- Funciona nos principais browsers: Internet Explorer 6+, FireFox, Chrome, Safari e Opera.
Faça o e ajuste às suas necessidades.
Ae Ramon! Tá se garantindo! Artigo muito bom cara! Parabéns!
Criando listas clicáveis e acessíveis com Jquery –