CSS no Lanche

Para aumentar a usabilidade do seu site o ponto inicial seria dar uma maior atenção aos links internos dos seu site, e hoje vou mostrar aqui a utilização do pseudo-seletor CSS3 :target, que é utilizado para manipular as âncoras do HTML. Já falei sobre a sua utilização em um outro post. Já mostrei em um post anterior os benefícios da utilização do pseudo seletor :target, onde eu tenho a possibilidade de aplicar qualquer estilo a âncora após o usuário clicar na mesma.

O exemplo de hoje foi baseado 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 Web</a></li>
        <li><a class="tab_css" href="#css" title="CSS no Lanche" rel="alternate">CSS no Lanche</a></li>
    </ul>

    <div id="pinceladas">
    	<ul>
            <li><a href="#" title="Texto aqui">Texto aqui</a></li>
            <li><a href="#" title="Texto aqui">Texto aqui</a></li>
            <li><a href="#" title="Texto aqui">Texto aqui</a></li>
            <li><a href="#" title="Texto aqui">Texto aqui</a></li>
            <li><a href="#" title="Texto aqui">Texto aqui</a></li>
        </ul>
    </div>

    <div id="css">

    	<ul>
            <li><a href="#" title="Texto aqui">Texto aqui</a></li>
            <li><a href="#" title="Texto aqui">Texto aqui</a></li>
            <li><a href="#" title="Texto aqui">Texto aqui</a></li>
            <li><a href="#" title="Texto aqui">Texto aqui</a></li>
            <li><a href="#" title="Texto aqui">Texto aqui</a></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 por que disso quando verem o exemplo final. Após, defini o conteúdo de cada aba, na div #pinceladas conteúdo referente a aba pinceladas e na div #css conteúdo referente a aba css. Para aquele 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, após 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, os estilos das linhas 1 até a 45 não existem segredo, mas é a partir da linha 46 as coisas começam a acontecer, pois temos que definir que uma das abas fiquem escondidas, por isso utilizamos z-index:-1. É obrigatório 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 a linha 51 onde aplicamos o pseudo seletor :target, que fará com que ao usuário clicar em uma das abas, seja definido um z-index maior e a aba que antes estava invisível ao usuário agora se torne 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 no tutorial.