Lleugerament torrat

Russ publicat un article sobre "llistes niats utilitzat per crear una carpeta simple metàfora". Vaig pensar que havia aplicarà la mateixa marca-i canviar el CSS per crear barra de navegació esquerra per tornar a propòsit i tornar a utilitzar el mateix codi. Així que aquí va. 'Course, jo espero que voleu canviar el tamany de pixel a em i fer tot relatiu. La CSS també es pot racionalitzar una mica més.

HTML

<ul id="sitemap">
<li> <a href="#"> tema 1 </ a> </ li>
<li> <a href="#"> tema 2 </ a> </ li>
<li> <a href="#"> tema 3 </ a> </ li>
<li> <a href="#" class="open"> tema 4 </ a>

<ul>
<li> <a href="#"> Subtema 1 </ a> </ li>
<li> <a href="#"> Subtema 2 </ a> </ li>
<li> <a href="#" class="open"> sub-tema 3 </ a>

<ul>
<li> <a href="#"> sub-sub-punt 1 </ a> </ li>
<li> <a href="#"> sub-sub-tema 2 </ a> </ li>
<li> <a href="#" class="open"> sub-sub-tema 3 </ a>

<ul>
<li> <a href="#"> sub-sub-sub-punt 1 </ a> </ li>
<li> <a href="#"> Sub-sub-sub-tema 2 </ a> </ li>
<li> <a href="#"> sub-sub-sub-tema 3 </ a> </ li>
<li> <a href="#"> sub-sub-sub-tema 4 </ a> </ li>
</ Ul>

</ Li>

<li> <a href="#"> sub-sub-tema 4 </ a> </ li>
</ Ul>
</ Li>

<li> <a href="#"> sub-tema 4 </ a> </ li>
</ Ul>
</ Li>

<li> <a href="#"> tema 5 </ a> </ li>
<li> <a href="#"> tema 6 </ a> </ li>
</ Ul>

CSS

ul # (mapa del lloc
frontera: cap;
margin: 0;
llista-estil-type: cap;
background-color: # FFF;
padding: 0;
amplada: 175px;
font: normal 93% Verdana, sans-serif;
frontera dreta: 1px # f3f1ed sòlids;
color: # 333;
flotador: l'esquerra;
margin: 0 0 1em 0;
)

ul # (mapa del lloc li-marge inferior: 0;)

# Ul li un mapa de la web (
antecedents: url (arrow_black_r.gif) dret de no repetir DFDBD5 #;
color: # 000;
font: negreta;
pantalla: bloc;
padding: 7PX 7PX 7PX 0.5em;
text-decoration: none;
ample: auto;
)

ul # mapa del lloc a.open li (
Antecedents: # f3f1ed adreça (arrow_brown_d.gif) de no repetir dret;
color: # 6a2b04;
font: negreta;
)

Mapa del lloc # ul li li (a.open
Antecedents: # e3e0db adreça (arrow_brown_d.gif) de no repetir dret;
color: # 6a2b04;
font: negreta;
)

Mapa del lloc # ul li li li (a.open
Antecedents: # dfdbd5 adreça (arrow_brown_d.gif) de no repetir dret;
color: # 6a2b04;
font: negreta;
)

Mapa del lloc # ul li li li li (a.open
Antecedents: # dfdbd5 adreça (arrow_brown_d.gif) de no repetir dret;
color: # 6a2b04;
font: negreta;
)

/ * Segon nivell * /

ul # (ul mapa del lloc
margin: 0 0 0 0;
padding: 0;
llista-estil-type: cap;
)

Mapa del lloc # ul li li (fons: url (dot2.gif) no-repeat;)

ul # mapa de la web un li li (
antecedents: url (arrow_or_r.gif) 5px no-repeat # F3F1ED;
color: # 000;
font: normal;
pantalla: bloc;
padding: 7PX 7PX 7PX 1.3em;
text-decoration: none;
ample: auto;
)

/ * Tercer nivell * /

Mapa del lloc # ul ul ul (
antecedents: url (dot.gif) repetir-i 30px 0;
)

Mapa del lloc # ul li li li (
antecedents: url (dot2.gif) no-repeat 30px .5 em;
)

Mapa del lloc # ul li li li (un
padding: .5 em 0 .5 em 2.5em;
antecedents: url (arrow_or_r.gif) 18px no-repeat # F3F1ED;
)

/ * Quart nivell * /

Mapa del lloc # ul ul ul ul (
antecedents: url (dot.gif) repetir-i 60px 0;
)
Mapa del lloc # ul li li li li (
antecedents: url (dot2.gif) no-repeat 60px 0;
)
Mapa del lloc # ul li li li li (un
padding: .5 em 0 .5 em 3.5em;
antecedents: url (arrow_or_r.gif) 31px no-repeat # F3F1ED;
)
a: link (
color: # 000;
background-color: transparents;
)
a: hover (
color: # b64908;
)