I have a list with multiple sections. I try to make it look like a kind of tree. It started quite well but I can't fix the last bits.
The code can be found at:
http://jsfiddle.net/Kwfpm/
Here is how it should work
There are some repeated problems but these should be solved if the two above is solved.
Here is a link what it should look like (without the collapsing things):
Open and close to see the tree: http://jquery.bassistance.de/treeview/demo/prerendered.html
Info
If JSfiddle don't work you can use this:
CSS
* {
margin: 0;
padding: 0;
}
.sidebar > ul > li {
background: none;
}
li {
padding-left: 20px;
list-style: none;
background: url('http://www.jenst.se/images/normal.png') repeat-y 10px 0;
color: #333;
font-family: Arial;
font-size: 13px;
line-height: 22px;
}
li a {
color: #555;
}
li:last-child {
background: url('http://www.jenst.se/images/lastchild.png') no-repeat 10px 0px;
}
HTML
<div class="sidebar default">
<ul>
<li id="categories-10" class="widget widget_categories">
<h4 class="title">Kategorier</h4>
<ul>
<li class="cat-item cat-item-7"><a href="http://localhost/concepts/addmod/category/sjukt-lang-kategori-som-tar-for-mycket-plats/" title="Se alla inlägg sparade under Datorer">Datorer</a>
</li>
<li class="cat-item cat-item-3"><a href="http://localhost/concepts/addmod/category/testkategori/" title="Se alla inlägg sparade under Mjukvara">Mjukvara</a>
<ul class='children'>
<li class="cat-item cat-item-4"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/" title="Se alla inlägg sparade under Hårdvara">Hårdvara</a>
<ul class='children'>
<li class="cat-item cat-item-6"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/underkategori-2/" title="Se alla inlägg sparade under Microsoft">Microsoft</a>
</li>
<li class="cat-item cat-item-9"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/bla/" title="Se alla inlägg sparade under Office-paket">Office-paket</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="cat-item cat-item-3"><a href="http://localhost/concepts/addmod/category/testkategori/" title="Se alla inlägg sparade under Mjukvara">Mjukvara</a>
<ul class='children'>
<li class="cat-item cat-item-4"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/" title="Se alla inlägg sparade under Hårdvara">Hårdvara</a>
<ul class='children'>
<li class="cat-item cat-item-6"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/underkategori-2/" title="Se alla inlägg sparade under Microsoft">Microsoft</a>
</li>
<li class="cat-item cat-item-9"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/bla/" title="Se alla inlägg sparade under Office-paket">Office-paket</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="categories-10" class="widget widget_categories">
<ul>
<li class="cat-item cat-item-7"><a href="http://localhost/concepts/addmod/category/sjukt-lang-kategori-som-tar-for-mycket-plats/" title="Se alla inlägg sparade under Datorer">Datorer</a>
</li>
<li class="cat-item cat-item-3"><a href="http://localhost/concepts/addmod/category/testkategori/" title="Se alla inlägg sparade under Mjukvara">Mjukvara</a>
<ul class='children'>
<li class="cat-item cat-item-4"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/" title="Se alla inlägg sparade under Hårdvara">Hårdvara</a>
<ul class='children'>
<li class="cat-item cat-item-6"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/underkategori-2/" title="Se alla inlägg sparade under Microsoft">Microsoft</a>
</li>
<li class="cat-item cat-item-9"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/bla/" title="Se alla inlägg sparade under Office-paket">Office-paket</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Have a look at this javascript treeview: http://krijnhoetmer.nl/stuff/javascript/list-treeview-menu/
It does have a same structure as you prefer with li's and ul's. Maybe you could take a look at it with firebug.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With