I CSS3, com'è noto, hanno introdotto la pseudo-classe strutturale :target
, che seleziona un elemento quando questo è la destinazione di un'ancora all'interno del documento. In questo articolo vedremo un'applicazione pratica di questa pseudo-classe che verrà usata per creare un menu ad albero espandibile senza utilizzare JavaScript.
Partiamo da questa struttura HTML:
<ul id="folder">
<li>
<a href="#sub-1">1</a><span>Folder 1</span>
<ul id="sub-1">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
<li>
<a href="#sub-2">2</a><span>Folder 2</span>
<ul id="sub-2">
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</li>
</ul>
A questa struttura assegneremo i seguenti stili CSS:
#folder {
margin: 2em;
}
#folder > li {margin-bottom: 0.5em;}
#folder > li > a {
display: inline-block;
width: 16px;
height: 16px;
text-indent: -1000em;
background: url(icons.png) no-repeat 0 -32px;
margin-right: 5px;
}
#folder > li > a:active {background-position: 0 -16px;}
#folder > li > a + span {
display: inline-block;
height: 16px;
line-height: 16px;
padding-left: 20px;
font-weight: bold;
background: url(icons.png) no-repeat 0 0;
}
#folder > li ul {
margin-left: 2.5em;
line-height: 1.4;
display: none;
}
#folder > li ul:target {
display: block;
}
Come si può notare, la pseudo-classe :target
entra in azione quando si clicca sull'icona contenuta nel link corrispondente (un'ancora). Potete visionare l'esempio finale in questa pagina.