Визуализация отпечатка дерева дерева файлов

Для страницы карты сайта У меня есть упорядоченный текст и связанный «уровень» того, как далеко находится страница в дереве.Визуализация отпечатка дерева дерева файлов

Прямо сейчас у нас самый упрощенный вид с отступом с использованием полей CSS, и мы хотим, чтобы он выглядел более напуганным.

Вот пример кода и ссылку на тестовую страницу:

HTML:

<div class='sitemapItem'> 
    <a href="#"> 
    <div class='sitemapLevelX'>FOO</div> 
    </a> 
</div>

CSS:

.sitemapLevelX{ 
    margin-left:Ypx; 
}

Пример кода можно найти здесь: http://jsfiddle.net/m77TR/1/

Включая следующее изображение, чтобы понять, что Я стремлюсь к:

enter image description here

Можно ли сделать относительно просто в CSS? Или мне нужно посыпать некоторые javascript сверху?

источник

2013-11-07 zaf

Вы могли бы просто достичь этой структуры, используя вложенную ул:

<ul> 
    <li>level 1</li> 
    <li>level 1</li> 
    <li>level 1 with sub 
     <ul> 
      <li>level 2</li> 
      <li>level 2</li> 
     </ul> 
    </li> 
</ul>

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

Демонстрационный для нужного макета можно увидеть здесь: http://jsfiddle.net/N4JH2/ и учебник о том, как получить это сделано здесь: http://www.csscody.com/css/css-sitemap-design-tutorial/594/

источник

2013-11-07 09:53:05

А, да, точки пули добавляют некоторые визуальные подсказки. Но логика отображения и содержимое HTML становятся более сложными. Предпочитайте, чтобы презентация не содержалась в содержимом. – zaf

вот пример точного макета, который вы пытаетесь достичь ... но он использует ту же структуру ul, что и моя демонстрация ... http://www.csscody.com/css/css-sitemap-design-tutorial/ 594/что вы, вероятно, можете попробовать, если вы действительно хотите использовать divs с классами. заключается в написании функций javascript, которые преобразуют эти классы в структуру ul ... Но я не думаю, что это лучший способ. Я думаю, вы должны серьезно подумать об использовании такого типа структуры. Поскольку он лучше структурирован. –

Спасибо за ссылку. «Время увидеть окончательный результат - вуаля!» не совсем убедились, что они заставили его работать ... – zaf

-1

Ближайшего CSS свойство я могу думать о том, «цитата», который позволяет определить разные символы для разных уровней кавычек.

источник

2013-11-07 09:55:15

Визуализация отпечатка дерева дерева файлов

ответ

Смежные вопросы