Leichtfertig Geröstete

Russ entsandte einen Artikel zum Thema "Geschachtelte Listen verwendet, um eine einfache Ordner-metaphore". Dachte, ich würde die gleiche Marke-up und ändern Sie die CSS zu schaffen linken Navigationsleiste wieder Zweck und erneut die Verwendung dieses Codes. Also hier geht. "Natürlich, ich würde erwarten, die Sie ändern die Pixel-Größen zu em und machen es alle relativ. Die CSS kann auch gestrafft ein bisschen weiter.

HTML

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

<ul>
<li> <a href="#"> Sub-Element 1 </ a> </ li>
<li> <a href="#"> Sub-Element 2 </ a> </ li>
<li> <a href="#" class="open"> Sub-Element 3 </ a>

<ul>
<li> <a href="#"> Sub-Sub-Element 1 </ a> </ li>
<a <li> href="#"> Sub-Sub-Element 2 </ a> </ li>
<li> <a href="#" class="open"> Sub-Sub-Element 3 </ a>

<ul>
<li> <a href="#"> sub-sub-sub-Element 1 </ a> </ li>
<li> <a href="#"> sub-sub-sub-Element 2 </ a> </ li>
<li> <a href="#"> sub-sub-sub-Element 3 </ a> </ li>
<li> <a href="#"> sub-sub-sub-Punkt 4 </ a> </ li>
</ ul>

</ li>

<li> <a href="#"> Sub-Sub-Element 4 </ a> </ li>
</ ul>
</ li>

<li> <a href="#"> sub-Punkt 4 </ a> </ li>
</ ul>
</ li>

<li> <a href="#"> Punkt 5 </ a> </ li>
<li> <a href="#"> Punkt 6 </ a> </ li>
</ ul>

CSS

ul (# sitemap
border: none;
margin: 0;
list-style-type: none;
background-color: # FFF;
padding: 0;
width: 175px;
font: normal 93% Verdana, sans-serif;
border-right: 1px solid # f3f1ed;
color: # 333;
float: left;
margin: 0 0 1em 0;
)

ul # sitemap li (margin-bottom: 0;)

# sitemap ul li a (
Hintergrund: url (arrow_black_r.gif) Recht nicht-repeat # DFDBD5;
color: # 000;
font-weight: bold;
display: block;
padding: 7PX 7PX 7PX 0.5em;
text-decoration: none;
Breite: auto;
)

ul # sitemap li a.open (
background: # f3f1ed url (arrow_brown_d.gif) no-repeat Recht;
color: # 6a2b04;
font-weight: bold;
)

ul # sitemap li li a.open (
background: # e3e0db url (arrow_brown_d.gif) no-repeat Recht;
color: # 6a2b04;
font-weight: bold;
)

ul # sitemap li li li a.open (
background: # dfdbd5 url (arrow_brown_d.gif) no-repeat Recht;
color: # 6a2b04;
font-weight: bold;
)

ul # sitemap li li li li a.open (
background: # dfdbd5 url (arrow_brown_d.gif) no-repeat Recht;
color: # 6a2b04;
font-weight: bold;
)

/ * Zweiten Ebene * /

ul # sitemap ul (
margin: 0 0 0 0;
padding: 0;
list-style-type: none;
)

ul # sitemap li li (background: url (dot2.gif) no-repeat;)

ul # sitemap li li a (
Hintergrund: url (arrow_or_r.gif) 5px no-repeat # F3F1ED;
color: # 000;
font-weight: normal;
display: block;
padding: 7PX 7PX 7PX 1.3em;
text-decoration: none;
Breite: auto;
)

/ * Dritte Ebene * /

ul # sitemap ul ul (
Hintergrund: url (dot.gif) repeat-y 30px 0;
)

ul # sitemap li li li (
Hintergrund: url (dot2.gif) no-repeat 30px ,5 em;
)

ul # sitemap li li li a (
padding: .5 em 0 .5 em 2.5em;
Hintergrund: url (arrow_or_r.gif) 18px no-repeat # F3F1ED;
)

/ * Vierten Ebene * /

ul # sitemap ul ul ul (
Hintergrund: url (dot.gif) repeat-y 60px 0;
)
ul # sitemap li li li li (
Hintergrund: url (dot2.gif) no-repeat 60px 0;
)
ul # sitemap li li li li a (
padding: .5 em 0 .5 em 3.5em;
Hintergrund: url (arrow_or_r.gif) 31px no-repeat # F3F1ED;
)
a: link (
color: # 000;
background-color: transparent;
)
a: hover (
color: # b64908;
)