CSS: albero di directory

Con il contenuto generato dei CSS si possono ottenere interessanti effetti decorativi e visivi. Una loro applicazione è sicuramente la creazione dei nodi nella struttura di un albero di directory. Come si vedrà, il contenuto generato inserirà semplicemente dei trattini di spaziatura in numero proporzionale alla profondità dell'albero. Vediamo insieme i dettagli.

Abbiamo questa struttura HTML:

<ul id="directory">
	<li>home</li>
	<li>pub
		<ul>
			<li>temp</li>
			<li>docs
				<ul>
					<li>doc1.doc</li>
					<li>doc2.doc</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Iniziamo subito con l'assegnare degli stili all'elemento più esterno, directory:

#directory {
	margin: 0 auto;
	width: 15em;
	padding: 0;
	list-style: none;
	font: 90% Arial, sans-serif;
	border-left: 1px solid;
	border-bottom: 1px solid;
}

Il bordo sinistro di questo elemento formerà l'ossatura principale dell'albero. Resettiamo quindi gli stili delle altre liste al suo interno:

#directory ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

Creiamo quindi il primo nodo nell'albero inserendo un trattino prima delle voci di lista più esterne:

#directory > li:before {
	content: '\2013';
	padding-right: 3px;
	position: relative;
	left: -1px;
}

Il posizionamento relativo negativo fa in modo che non ci siano spazi tra il trattino e il bordo della lista. A questo punto creiamo l'indentazione delle liste più interne e assegniamo loro un bordo sinistro:

#directory > li > ul {
	margin-left: 1em;
}

#directory > li > ul > li {
	border-left: 1px solid;
}

#directory > li > ul > li > ul {
	margin-left: 1.8em;
}

#directory > li > ul > li > ul > li {
	border-left: 1px solid;
}

Quindi ripetiamo la stessa operazione col contenuto generato per le voci di queste liste, ma aumentando progressivamente il numero di trattini inseriti:

#directory > li > ul > li:before {
	content: '\2013\2013';
	padding-right: 3px;
	position: relative;
	left: -1px;
}
#directory > li > ul > li > ul > li:before {

	content: '\2013\2013\2013';
	padding-right: 3px;
	position: relative;
	left: -1px;

}

Potete visionare l'esempio finale in questa pagina.