Para aumentar a usabilidade do seu site, o ponto inicial seria dar uma maior atenção aos links internos dele. Veremos aqui a utilização do pseudo-seletor CSS3 :target, que é utilizado para manipular as âncoras do HTML.
Para desenvolver o artigo me baseei no exemplo citado na Revista W, edição 101, onde o autor Craig Grannell nos ensina a desenvolver um menu em abas que ao clicar o conteúdo é trocado. Isso até então era possível somente com a utilização de JavaScript, mas com a utilização do pseudo seletor :target isso agora fica fácil.
Primeiramente temos que montar a nossa estrutura HTML, muito simples e de fácil entendimento:
<div id="container">
<ul id="tabs">
<li><a class="tab_pinceladas" href="#pinceladas" title="Pinceladas da Web" rel="me">Pinceladas da Weba>li>
<li><a class="tab_css" href="#css" title="CSS no Lanche" rel="alternate">CSS no Lanchea>li>
ul>
<div id="pinceladas">
<ul>
<li><a href="#" title="Texto aqui">Texto aquia>li>
<li><a href="#" title="Texto aqui">Texto aquia>li>
<li><a href="#" title="Texto aqui">Texto aquia>li>
<li><a href="#" title="Texto aqui">Texto aquia>li>
<li><a href="#" title="Texto aqui">Texto aquia>li>
ul>
div>
<div id="css">
<ul>
<li><a href="#" title="Texto aqui">Texto aquia>li>
<li><a href="#" title="Texto aqui">Texto aquia>li>
<li><a href="#" title="Texto aqui">Texto aquia>li>
<li><a href="#" title="Texto aqui">Texto aquia>li>
<li><a href="#" title="Texto aqui">Texto aquia>li>
ul>
div>
div>Utilizei de uma div #container para conter toda a estrutura de nossas abas. Após isso, utilizei de uma lista desordenada com os links para as tabs com nomes fictícios: pinceladas e css, vocês entenderão o porquê disso quando virem o exemplo final. Depois, defini o conteúdo de cada aba; na div #pinceladas o conteúdo referente à aba pinceladas e, na div #css, o conteúdo referente à aba css. Para aqueles que já desenvolveram sistemas de tabs com JavaScript, até agora estão se sentindo familiarizados com a estrutura, mas o grande segredo está no CSS:
* {
padding: 0;
margin: 0;
}
body {
font: 62.5% "Lucida Grande", "Lucida Sans Unicode", Lucida, Arial, Helvetica, san-serif;
padding: 30px;
}
a {text-decoration:none}
li {
font-size:1.2em;
list-style:none;
}Primeiramente, vamos aplicar algumas definições gerais ao nosso exemplo, como utilizar um CSS Reset genérico. Depois definimos tamanho e família de fonte e outros estilos. Os estilos listados abaixo serão os utilizados no exemplo:
#container {
background-color:#aaa;
border:10px solid #666;
width: 300px;
position: relative;
overflow: auto;
padding:20px;
}
#tabs li {
float:left;
text-align:center;
width:150px;
}
#tabs li a {
color:#000;
padding:5px;
display:block;
}
#pinceladas {
background-color: #eaedf0;
}
#css {
background-color: #69c;
}
#pinceladas a {
color:#000;
}
#css a {
color:#fff;
}
#pinceladas, #css {
float:left;
padding:10px;
width:280px;
}
#pinceladas li, #css li {
border-bottom: 1px dotted #000000;
padding: 5px 0;
}
.tab_pinceladas {
background-color:#eaedf0;
}
.tab_css {
background-color:#69c;
}
#css {
position: relative;
margin-left: -300px;
z-index: -1 !important;
}
#container :target {
z-index: 1 !important;
}No CSS listado acima, nos estilos das linhas 1 até a 45 não existem segredos. É a partir da linha 46 que as coisas começam a acontecer, pois temos que definir que uma das abas fiquem escondidas, por isso utilizamos z-index:-1. É obrigatória a definição de float para o conteúdo de nossas abas, como você pode verificar na linha 32, pois depois teremos que definir uma margem negativa para a aba que ficará escondida, caso contrário o espaço que ela ocuparia no fluxo normal da página ficaria visível.
Agora vamos à linha 51, onde aplicamos o pseudo seletor :target, que fará com que o usuário clique em uma das abas, seja definido um z-index maior, e a aba que antes estava invisível ao usuário agora se torna visível. Finalmente vamos ver agora um exemplo de tabs com CSS funcionando.
Infelizmente o seletor :target não é suportado por todos os browsers, mas se vocês repararem no código fonte do exemplo, verão que foi utilizado um arquivo JavaScript chamado: csstarget.js, um script desenvolvido por Peter Ryan que faz com que o seletor :target funcione em todos os browsers que não suportam esse seletor corretamente.
O que também deve ser feito é que você deve definir uma classe no CSS, chamada .target para aqueles browsers que não suportam o :target, pois ela será utilizada pelo JavaScript para executar os efeitos, como você pode ver no código abaixo:
#container .target {
z-index: 1 !important;/*Para Browsers que não suportam :target*/
}Vejam o exemplo. Caso tenha interesse, você pode baixar os arquivos utilizados.
Autor
Nenhum comentário:
Postar um comentário