Что такое css дерево

Древовидные представления, только html и css

Древовидное представление (сворачиваемый список) можно сделать, используя только html и css, без использования JavaScript.

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

HTML

HTML разметка начинается с простых вложенных списков:

. Внутренности каждого элемента списка, содержащего свой вложенный список, поместить внутрь элемента и добавить . Атрибут open e элемента будет использоваться для управления вложенными элементами. Список верхнего уровня изначально раскрыт:

Без CSS это будет выглядеть так:

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

Пользовательские свойства

На компоновку древовидного представления влияют два параметра: межстрочный интервал (равный высоте строки текста) и радиус маркеров. Мы начнем с создания пользовательских CSS-свойств для определения этих размеров:

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

Отступы

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

Для селектора .tree li CSS-свойство display: block; удалит маркеры из элементов списка. position: relative; установит новый контекст стека и содержимого блока, который будет использоваться для размещения линий и маркеров.

padding-left cделает отступы для элементов списка. Отступ равен удвоенному интервалу минус радиус маркера минус ширина линии в два пикселя. В результате текст в элементе списка будет выровнен по левой стороне маркера под ним.

Для селектора .tree ul CSS-свойство margin-left компенсирует отступы селектора .tree li , а padding-left сбросит отступы, которые браузер устанавливает спискам по умолчанию.

Для древовидного представления с развернутыми вложенными списками применение этого стиля дает:

Вертикальные линии

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

.tree ul li < border-left : 2px solid #ddd; >.tree ul li:last-child

Для вертикальных линий используется CSS-свойство border-left , кроме последнего элемента в каждом списке, где рамка скрывается, поскольку линия не должна продолжаться за маркером этого элемента. Делая границу прозрачной, а не удаляя её полностью, можно избежать необходимости увеличивать отступ для компенсации выравнивания.

Применение этого стиля дает:

Горизонтальные линии

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

Этот код создает ещё и короткие вертикальные линии, так как созданные ранее вертикальные линии не доходят до маркеров на их верхнем и нижнем концах.

Здесь создаётся блок и располагается так, чтобы начало оказалось в середине предыдущей строки текста, перекрывая вертикальную линию слева от неё.

Размеры блока должны быть на два пикселя шире интервала, чтобы он перекрывал вертикальную линию слева от него и на один пиксель выше, поскольку половина ширины горизонтальной линии находится ниже середины строки текста. Замечание: здесь используется box-sizing: border-box , поэтому размеры включают рамку.

Применение этого стиля дает:

HTML-элемент summary

Далее следует удалить стиль по умолчанию у HTML-элемента summary :

.tree summary < display : block; cursor : pointer; >.tree summary::marker, .tree summary::-webkit-details-marker < display : none; >.tree summary:focus < outline : none; >.tree summary:focus-visible

здесь будут удалены маркеры-стрелки и установлен курсор, чтобы обозначить возможность взаимодействовать с элементом — кликабельность.

Safari показывает индикатор фокуса вокруг summary даже если используется мышь, а не клавиатура. Поэтому здесь сперва удаляется стиль фокуса, а затем используется псевдокласс :focus-visible , чтобы добавить его обратно для посетителей, использующих навигацию с помощью клавиатуры.

Применение этого стиля дает:

Маркеры

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

.tree li::after, .tree summary::before< content : ''; display : block; position : absolute; top : calc(var(--spacing) / 2 - var(--radius)); left : calc(var(--spacing) - var(--radius) - 1px); width : calc(2 * var(--radius)); height : calc(2 * var(--radius)); border-radius : 50%; background : #ddd; >

Здесь формируется блок, отцентрированный над пересечением горизонтальной и вертикальной линиями. Верх располагается в середине текстовой строки за вычетом радиуса. Левая сторона располагается на краю вертикальной линии минус радиус минус один пиксель, соответствующий половине ширины линии.

Применение этого стиля дает:

Кнопки сворачивания и раскрытия списков

Наконец, осталось добавить кнопки сворачивания и раскрытия древовидных списков:

.tree summary::before < content : '+'; z-index : 1; background : #696; color : #fff; line-height : calc(2 * var(--radius) - 2px); text-align : center; >.tree details[open] > summary::before

Обратите внимание, что используется настоящий знак минус (−), а не дефис (-). Он соответствует внешнему виду знака плюс, тогда как в большинстве шрифтов дефис уже и ниже.

В зависимости от используемого шрифта, может потребоваться коррекция положения символов, например — 2px у CSS-свойства line-height .

Применение этого стиля приводит к готовому древовидному представлению:

Готовый код

.tree < --spacing : 1.5rem; --radius : 10px; >.tree li < display : block; position : relative; padding-left : calc(2 * var(--spacing) - var(--radius) - 2px); >.tree ul < margin-left : calc(var(--radius) - var(--spacing)); padding-left : 0; >.tree ul li < border-left : 2px solid #ddd; >.tree ul li:last-child < border-color : transparent; >.tree ul li::before < content : ''; display : block; position : absolute; top : calc(var(--spacing) / -2); left : -2px; width : calc(var(--spacing) + 2px); height : calc(var(--spacing) + 1px); border : solid #ddd; border-width : 0 0 2px 2px; >.tree summary < display : block; cursor : pointer; >.tree summary::marker, .tree summary::-webkit-details-marker < display : none; >.tree summary:focus < outline : none; >.tree summary:focus-visible < outline : 1px dotted #000; >.tree li::after, .tree summary::before < content : ''; display : block; position : absolute; top : calc(var(--spacing) / 2 - var(--radius)); left : calc(var(--spacing) - var(--radius) - 1px); width : calc(2 * var(--radius)); height : calc(2 * var(--radius)); border-radius : 50%; background : #ddd; >.tree summary::before < content : '+'; z-index : 1; background : #696; color : #fff; line-height : calc(2 * var(--radius) - 2px); text-align : center; >.tree details[open] > summary::before

Источник

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

Как-то мне потребовалось сделать иерархическое представление структуры проекта, для реализации был выбран CSS.

Это можно сделать за несколько простых шагов.

Для начала создаем желаемую структуру из вложенных списков и заголовков для них:

Узлы уровней создаются с помощью заголовков H1 — H6. То есть перед каждым новым ветвлением должен быть заголовок. Чтобы они все вели себя одинаково c точки зрения древовидного списка, добавляем им общий класс .header .

Добавляем отступы и рамки, чтобы видеть структуру.

И вот теперь самое интересное: добавляем полоски, начнем с горизонтальных.

LI:before, .header:before content: ""; display: block; position: absolute; left: 0; bottom: .5em; width: 15px; height: 0; border-bottom: 1px solid #333; >

Они сделаны абсолютно позиционированными псевдоэлементами. Здесь можно было бы обойтись и inline-block с вертикальным выравниванием, но position: absolute; в сочетании с bottom позволит нам сделать вертикальные линии, направленные вверх.

Чтобы полоски не выпадали из контекста, пунктам списка и заголовкам нужно задать относительное позиционирование, а чтобы они не заезжали на текст — паддинг слева тем же элементам.

LI, .header  position: relative; padding-left: 1.2em; >

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

Теперь добавим вертикальные линии:

.header:last-of-type:before, LI:last-child:before  height: 1000px; border: 1px solid #333; border-width: 0 0 1px 1px >

Получится лес вертикальных линий, от которого легко избавиться, задав всем спискам overflow: hidden; , вот результат:

И теперь в структуре хорошо видно дублирование некоторых линий.

Оно происходит из-за того, что заголовки ( .header ) находятся внутри элементов списка ( LI ), таким образом они получают две направляющих.

Добавим спискам с заголовками класс .p-has-headers и покрасим разные направляющие разными цветами, чтобы увидеть что происходит.

.p-has-headers > LI:before  border-color: red; > .header:before, .header:last-of-type:before border-color: green; >

Направляющие обычных пунктов списка остались черными, направляющие списков с заголовками стали красными, направляющие заголовков — зелеными.

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

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

Именно поэтому стили прописывались и для LI , и для .header . Если есть заголовок — ветка вверх должна вести от него, а не от конца списка. Таким образом, в списках, пункты которого содержат заголовки и которые мы пометили классом .p-has-headers , можно выключить направляющие для непосредственных наследников кодом вроде UL > LI .

.p-has-headers > LI:before  content: none; >

Получилась довольно простая конструкция, главное — не запутаться в тегах списков, и каждую новую ветку начинать с заголовка.

Сайдбар

Статьи

• Математические функции в CSS
• Адаптивное видео с помощью встроенных математических функций CSS
• Недоступность в картинках
• Единицы размеров в CSS
• Генератор цветовых тем
• Jekyll → Gatsby
• Вариативные шрифты
• Размеры в SVG
• Адаптивный Pixel Perfect
• Логотип не отвечает или временно недоступен
• SVG-паттерны
• Мыльные пузыри на SVG
• SVG-градиенты
• Весёлая консолька
• SVG-маски
• Умная прокрутка со Scroll Snap Points
• CSS-анимации для ротации изображений
• Анимированные SVG-маски
• Странности обводки в SVG
• SVG-прелоадеры
• Анимируем градиенты ещё раз
• Background-blend-mode
• Возможности оформления SVG
• CSS и SVG маски
• Nth-child и nth-of-type
• SVG-иконки
• SVG: заливка и обводка
• SVG-path
• SVG: группировка и переиспользование элементов
• SVG-фигуры и трансформации
• SVG
• СSS-градиенты и 3D
• Рисовалка анимированных теней
• Свежие CSS-паттерны
• CSS-паттерны
• Радиальные градиенты
• Линейные градиенты
• Крестики-нолики на CSS
• Border-image
• Электронные часы на CSS и JS.
• Сколько весят селекторы?
• Символы юникода
• Свойство content
• Анимируем CSS-градиенты
• Текстовые эффекты
• Древовидный список на CSS
• Css-селекторы, часть 2
• Css-селекторы
• Контекст наложения
• Два способа «прошить» элемент по краю
• Box-sizing
• Цвета в CSS
• Фон под строчками: добавляем поля
• Box-shadow
• Css-фигуры: лепесток
• Transform
• Css Animation
• 3D-куб
• Border-radius
• First letter
• Эти глаза напротив
• CSS-фигуры
• Стрелки с помощью свойства border
• Flexbox

Страницы

Проекты

Источник

Древовидные списки разных вариаций

Древовидный вид HTML списков является лучшим вариантом визуального обзора и изучения их иерархической структуры. Рассмотрим несколько преобразований обычного HTML списка в более наглядное древовидное состояние при помощи магии CSS стилей.

1. Пример обычного HTML списка

HTML разметка списка

2. Пример HTML списка с соединительными линиями

класс treeline для создания соединительных линий каждого раздела списка.

HTML разметка списка с соединительными линиями

CSS стили списка с соединительными линиями

.treeline, .treeline ul, .treeline li < margin: 0; padding: 0; line-height: 1.2; list-style: none; >.treeline ul .treeline > li:not(:only-child), .treeline li li < position: relative; padding: 3px 0 0 20px; /* отступ текста */ >/* Стиль вертикальной линии */ .treeline li:not(:last-child) < border-left: 1px solid #ccc;>/* Стили горизонтальной линии*/ .treeline li li:before, .treeline > li:not(:only-child):before < content: ""; position: absolute; top: 0; left: 0; width: 1.1em; height: .7em; border-bottom:1px solid #ccc; >/* Вертикальная линия последнего пункта в списка */ .treeline li:last-child:before

3. Пример раскрывающегося HTML списка

HTML разметка раскрывающегося списка

К предыдущей разметке добавляем

для реализации функции раскрытия элементов древовидного списка.

CSS стили раскрывающегося списка

К CSS из предыдущего примера необходимо дописать следующие стили:

.treeline .drop < position: absolute; left: -6px; top: 5px; width: 11px; height: 11px; line-height: 1em; text-align: center; background: #9F9F9F; color: #fff; /* Фон и цвет кнопки, раскрывающей список */ font-size: 78%; /* Размер +/- */ cursor: pointer; -webkit-user-select: none; -moz-user-select: none; >.treeline li:last-child > .drop .treeline .drop + ul .treeline .dropM + ul

Скрипт, реализующий функцию раскрывающегося списка

Помимо HTML и CSS, данный способ оформления древовидных списков требует использование JS:

Данный JS код можно вставить в конец материала, пройдя в режим просмотра исходного кода. Учтите, что код скрипта может обрезаться редактором и, соответственно, не работать. В этом случае пройдите в настройки редактора и разрешите использование тега .

4. Пример вертикального древовидного списка

HTML разметка вертикального древовидного списка

CSS стили вертикального древовидного списка

.treevertical, .treevertical ul < position: relative; display: table; margin: 5px 0 0 0 !important; padding: 6px 0 0 0 !important; line-height: normal; text-align: center; word-wrap: break-word; word-break: break-all;>.treevertical li < position: relative; display: table-cell;>/* Отступ между пунктами */ .treevertical li:not(:only-child) .treevertical li:last-child .treevertical li:first-child /* Стили линий */ .treevertical ul:before, .treevertical ul li:before, .treevertical ul li:after < content: ""; position: absolute; top: -5px; left: 0; width: 50%; height: 5px; border-right: 1px solid #999;>.treevertical ul:before .treevertical ul li:not(:only-child):before .treevertical ul li:not(:only-child):first-child:before < right: 0; left: auto; border-left: 1px solid #999; border-right: none;>.treevertical ul li:not(:only-child):first-child:before, .treevertical ul li:not(:only-child):last-child:before < width: calc(50% + .5em/2); >.treevertical ul li:after .treevertical ul li:not(:last-child):not(:first-child):after

Источник