Список с увеличиваюшимся отступом слева

[jangot]

Добрый день.

Вот встала задача сверстать список так, что бы каждый новый вложенный список имел больший отступ чем предыдущий.

Задача вроде тривиальная, но при этом у каждого элемента списка должна быть черта снизу. Причем эта черта должна быть на всю ширину списка.

То есть должно быть примерно так (палочки это отступы):

первый уровень

——————————

||второй уровень

——————————

||||третий уровень

——————————

||снова второй

—————————--

[USF]

http://jsfiddle.net/JUeHd/6/

как пример подхода

[jangot]

Ну, с классом понятно как сделать, да и в общем можно просто с вложением написать типа

li {}

li li {}

li li li {}

li li li li {}

и т.д.

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

[USF]

ну тогда следовало написать это в шапке.

а делать это нужно все равно с использованием вложенности ul-li и(или) классами.

кто выступает формировщиком меню? какой-то модуль или вы вручную? если модуль, то он, по идее, должен выдавать его в таком формате, при котором понятно, какой элемент родительский, а какой дочерний.

И в зависимости от этого плясать

[jangot]

Дерево строит jsTree, думаю его можно настроить так, что бы он присваивал классы.

Но если так делать, то полюбому получается ограниченное количество можно описать. Ну сколько там 5 или 10, а хочется не ограниченное количество иметь.

Если бы не полоски, то можно было бы написать просто

li {padding-left:10px;}

и был бы желаемый результат.

Edited July 18, 2012 by jangot

[USF]

почему это ограниченное?

да хоть сто штук.

уровень вложенности проверить и помножить на коэффициент какой-нибудь.

тем более, что сам jsTree, как я полагаю, должен выдавать данные в какой-то иерархии

[jangot]

Да, но стили то придется писать для каждого уровня.

Можно конечно js-ом задать, но это тоже не очень красивое решение.

Ну ладно писать так писать.

[USF]

можете дать ссылку на страницу с выводом меню на jsTree?

[jangot]

Не не могу, проект закрытый да и продакшена еще нет

Но хтмл-ка такая же как и на демо jsTree http://www.jstree.com/demo