#css #dom #tree #background
#css #dom #дерево #фон
Вопрос:
У меня есть список с несколькими разделами. Я пытаюсь сделать так, чтобы это выглядело как своего рода дерево. Началось довольно хорошо, но я не могу исправить последние биты.
Код можно найти по:
Вот как это должно работать
- Первые «Datorer», «Mjukvara» и «Microsoft» должны быть соединены с деревом горизонтальной линией.
- «Mjukvara» в левом нижнем углу должно быть связано с «Категорией».
Есть несколько повторяющихся проблем, но они должны быть решены, если будут решены две вышеуказанные.
Вот ссылка на то, как это должно выглядеть (без сворачивающихся элементов):
Откройте и закройте, чтобы увидеть дерево: http://jquery.bassistance.de/treeview/demo/prerendered.html
Информация
- Я не знаю, сколько там уровней.
- HTML не может быть изменен, поскольку он сгенерирован WordPress
- Используйте фоны или границы, чтобы показать, что у вас получилось.
Если JSfiddle не работает, вы можете использовать это:
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>
Комментарии:
1. Есть ли какой-либо вариант javascript или это тоже запрещено?
2. Предпочтительнее @Marnix CSS, но я бы принял рабочий ответ Javascript.
3. Вы хотите написать это самостоятельно? Потому что я действительно нашел много отличных инструментов просмотра дерева для javascript.
Ответ №1:
Взгляните на этот javascript treeview: http://krijnhoetmer.nl/stuff/javascript/list-treeview-menu
Он имеет ту же структуру, что и вы предпочитаете для li и ul. Возможно, вы могли бы взглянуть на это с помощью firebug.
Ответ №2:
Я понял это. Вот рабочий код:
Красные границы могут быть изменены на горизонтальные линии фонового изображения.