Древовидный список

[MiXOH]

Привет всем.

Вот тут приведен пример того, что я хотел бы сделать
http://web.artlebedev.ru/tools/technogrette/html/treeview/

Но этот пример мне кажется достаточно сложным. Т.е. я никак не могу до конца понять как это реализовано, чтобы применить к своему случаю. В частности не понятно, как сделаны эти точечки.

Может кто поможет разобраться в основных моментах или предложит другой вариант реализации.

 

[Vovochka]

Ну ё маё. Для чего великие люди фаербаг писали?
Короче.
Эти точечки - это точечные, однопиксельные границы.
Левая - от LI
Нижняя - от DIV
У вложенного в DIV параграфа (P) установлено абсолютное позиционирование, но для позиционирования используется относительные величины (em).
Небольшой относительный сдвиг влево и вниз. Вот и все чудо.

 

[MiXOH]

что это точечные, однопиксельные границы, это я понимал.

Мне не было понятно от чего это границы. Спасибо за объяснение, теперь понял.

Остались 2 вещи которые мне не совсем нравятся:
1. Нижняя граница идет на всю страницу, можно ли ее как-то обрезать, чтобы она доходила только до начала текста?
2. Избавиться от 2-х элементов не получиться? (div, p) Хотелось бы поместить все в 1.

 

[Vovochka]

Смысл в том, что смещенный P закрывает собой границу, идущую до конца блока
Для этого у него проставлен свой background-color, Хотя фактически он такой же. Но это позволяет закрыть границу.

 

[Velvaruzh]

Здравствуйте.
У меня вопрос по этому древовидному списку.
Что нужно изменить в коде, чтоб список при начальной загрузке, был не открыт, а свёрнут?

 

[zlatov]

Что нужно изменить в коде, чтоб список при начальной загрузке, был не открыт, а свёрнут?

В коде JS добавить строчку, чтобы сворачивал, например на jQuery:
<!--shcode--><pre><code class='js'>$(".ul-dropfree").find("ul").slideUp(400).parents("li").children("div.drop").css({'background-position':"0 0"});[/CODE]
все что после .parents - изменяет минус на плюс.

Вообще у меня есть статья по древовидным спискам, с примерами.