Lightly Toasted

Russ posted an article on “Nested lists used to create a simple folder metaphore“. Thought I’d apply the same mark-up and change the CSS to create Left-hand navigation to re-purpose and re-use the same code. So here goes. ‘Course, I’d expect you’d change the pixel sizes to em and make it all relative. The CSScan also be streamlined a bit further.

HTML

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

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

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

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

</li>

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

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

<li><a href="#">item 5</a></li>
<li><a href="#">item 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;}

ul#sitemap li a{
background:url(arrow_black_r.gif) right no-repeat #DFDBD5;
color: #000;
font-weight: bold;
display:block;
padding:7px 7px 7px 0.5em;
text-decoration:none;
width:auto;
}

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

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

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

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

/* second level */

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{
background: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;
width:auto;
}

/* third level */

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

ul#sitemap li li li{
background: url(dot2.gif) no-repeat 30px .5em;
}

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

/* fourth level */

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