---
Searched a solution to style the sitemap with Javascript. Found out, that it is also possible to do something nice "just" with CSS and four Gif-Images. Very simple.
---
Und so wird die Sitemap in etwa aussehen:
---
The sitemap will look like this:
1. Die vier Gif runterladen:
---
1. Download the 4 Gif:
http://www.gameculture.com.sg/screensho ... images.zip
2. Die CSS einfügen:
---
2. Insert the CSS:
Code: Select all
ul.sitemap
{
margin: 1em 0;
list-style-type: none;
background: url(images/dot.gif) repeat-y 3px 0;
padding: 0;
}
ul.sitemap li
{
margin-bottom: .5em;
}
ul.sitemap li a
{
background: url(images/bullet1.gif) no-repeat 0 .4em;
padding-left: 15px;
}
ul.sitemap li a.open, ul.sitemap li li a.open, ul.sitemap li li li a.open, ul.sitemap li li li li a.open
{
background-image: url(images/bullet2.gif);
}
/* second level */
ul.sitemap ul
{
margin: .5em 0 0 0;
padding: 0;
list-style-type: none;
}
ul.sitemap li li
{
background: url(images/dot2.gif) no-repeat 2px .5em;
}
ul.sitemap li li a
{
padding: 0 0 0 30px;
background: url(images/bullet1.gif) no-repeat 20px .3em;
}
/* third level */
ul.sitemap ul ul
{
background: url(images/dot.gif) repeat-y 30px 0;
}
ul.sitemap li li li
{
background: url(images/dot2.gif) no-repeat 30px .5em;
}
ul.sitemap li li li a
{
padding: 0 0 0 60px;
background: url(images/bullet1.gif) no-repeat 50px .3em;
}
/* fourth level */
ul.sitemap ul ul ul
{
background: url(images/dot.gif) repeat-y 60px 0;
}
ul.sitemap li li li li
{
background: url(images/dot2.gif) no-repeat 60px .5em;
}
ul.sitemap li li li li a
{
padding: 0 0 0 90px;
background: url(images/bullet1.gif) no-repeat 80px .3em;
}
---
3. Make sure, that the images are linked correct in the CSS.
4. CSS-Klasse "sitemap" im CP Sitemap eintragen:
--- Entry "sitemap" in the CP Sitemap:
Vielleicht ist dieses Tutorial brauchbar für dich?
---
Maybe this tutorial is useful for you?
Ralf
---
Ralph