Html вертикальное меню дерево

Как сделать — Древовидное представление

Узнать, как создать древовидное представление с помощью CSS и JavaScript.

Древовидное представление

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

Нажмите на стрелку(и), чтобы открыть или закрыть ветви дерева.

• Напитки
  • Вода
  • Кофе
  • Чай
    • Черный чай
    • Белый чай
    • Зеленый чай
      • Сенча
      • Гекуро
      • Матча
      • Пи Ло Чун

      Вид дерева

      Шаг 1) Добавить HTML:

      Пример

      Шаг 2) Добавить CSS:

      Пример

      /* Удалить пули по умолчанию */
      ul, #myUL list-style-type: none;
      >

      /* Удалите поля и отступы из родительского ul */
      #myUL margin: 0;
      padding: 0;
      >

      /* Стиль курсора/стрелки */
      .caret cursor: pointer;
      user-select: none; /* Запретить выделение текста */
      >

      /* Создайте курсор/стрелку с юникодом, и стиль его */
      .caret::before content: «\25B6»;
      color: black;
      display: inline-block;
      margin-right: 6px;
      >

      /* Поверните значок курсора/стрелки при нажатии (с помощью JavaScript) */
      .caret-down::before transform: rotate(90deg);
      >

      /* Скрыть вложенный список */
      .nested display: none;
      >

      /* Показать вложенный список, когда пользователь нажимает на курсор стрелку (с JavaScript) */
      .active display: block;
      >

      Шаг 3) Добавить JavaScript:

      Пример

      var toggler = document.getElementsByClassName(«caret»);
      var i;

      for (i = 0; i < toggler.length; i++) toggler[i].addEventListener("click", function() this.parentElement.querySelector(".nested").classList.toggle("active");
      this.classList.toggle(«caret-down»);
      >);
      >

      Вид флажков дерева

      В этом примере мы используем юникод «ballot box» вместо каретки:

      Источник

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

      

      Древовидный вид 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

      Источник

      Tree views in CSS

      A tree view (collapsible list) can be created using only HTML and CSS , without the need for JavaScript. Accessibility software will see the tree view as lists nested inside disclosure widgets, and the standard keyboard interaction is supported automatically.

      The HTML

      We begin with the HTML for simple nested lists:

       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 

      ul>  li>  Giant planets  ul>  li>  Gas giants  ul>  li>Jupiterli>  li>Saturnli>  ul>  li>  li>  Ice giants  ul>  li>Uranusli>  li>Neptuneli>  ul>  li>  ul>  li> ul>

      element, and for each list item that contains a nested list, we put the contents of the list item inside and elements, using the open attribute to control which nested lists are initially expanded:

       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 

      ul class="tree">  li>  details open>  summary>Giant planetssummary>  ul>  li>  details>  summary>Gas giantssummary>  ul>  li>Jupiterli>  li>Saturnli>  ul>  details>  li>  li>  details>  summary>Ice giantssummary>  ul>  li>Uranusli>  li>Neptuneli>  ul>  details>  li>  ul>  details>  li> ul>

      Without any styling, this HTML produces:

      The browser implements the element as a disclosure widget, giving the ability to expand and collapse the nested lists, but the combination of bullet points and disclosure arrows produces a confusing user interface.

      Custom properties

      There are two dimensions that affect the layout of the tree view: the spacing between lines (which equals the line height of the text) and the radius of the markers. We begin by creating CSS custom properties for these dimensions:

      .tree  --spacing : 1.5rem;  --radius : 10px; >

      While we would usually use relative units to scale user interface controls based on the text size, for the markers this can lead to controls that are too small or excessively large, so we instead use a reasonable fixed size.

      Padding

      We then style the list items and nested lists to make space for the lines and markers:

       6 7 8 9 10 11 12 13 14 15 

      .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; >

      Line 7 removes the bullet points from list items. Line 8 establishes a new stacking context and containing block that we will use to position the lines and markers.

      Line 9 indents the list items. The indentation is equal to twice the spacing, minus the marker radius, minus the two-pixel line width. The result is that the text in a list item will align with the left side of the marker below it.

      Line 13 uses a negative margin to compensate for the indentation introduced by line 9, ensuring nested lists are indented by only the desired spacing. Line 14 removes the default padding that browsers apply to lists.

      On a tree view with all nested lists initially expanded, applying this styling produces:

      Vertical lines

      Next we add the vertical lines that form part of the lines joining the marker of each list item to the markers of its nested lists:

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

      We use a border to create the line, and hide it on the final item in each list as the line shouldn’t continue past this item’s marker. Making the border transparent, rather than removing it completely, avoids the need to increase the padding to compensate.

      Applying this styling produces:

      Horizontal lines

      We use generated content to add the horizontal lines that join the vertical lines to the markers of each list item:

      25 26 27 28 29 30 31 32 33 34 35 

      .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; >

      This code also creates short vertical lines, as the vertical lines created previously don’t extend all the way to the markers at their top and bottom ends.

      Lines 26 and 27 generate a block, and lines 28 to 30 position it to start at the midpoint of the preceding line of text, overlapping the vertical line to its left.

      Lines 31 and 32 set the size of the block. It needs to be two pixels wider than the spacing as it overlaps the vertical line to its left, and one pixel taller than the spacing as half the width of the horizontal line lies below the midpoint of the line of text. Note that we are assuming the use of border box sizing, so these dimensions include the border.

      Lines 33 and 34 create a border on the left and bottom sides of the block.

      Applying this styling produces:

      Summaries

      Next we remove the default styling from summaries:

      37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 

      .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; >

      Lines 38 and 44 remove the disclosure arrows. Line 44 is needed for Safari, with the two selectors on lines 42 and 43 covering different versions of the browser. Line 39 changes the cursor to indicate that the summary can be clicked to interact with it.

      Safari shows a focus indicator around summaries, even when using a pointer rather than keyboard navigation, so we remove the focus styling on line 48 and then use the :focus-visible pseudo-class to add it back for visitors using keyboard navigation on line 52.

      Applying this styling produces:

      Markers

      We use generated content again to create the markers:

      55 56 57 58 59 60 61 62 63 64 65 66 

      .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; >

      Lines 57 and 58 generate a block, and lines 59 to 61 center it over the corner where the horizontal and vertical lines meet. The top is positioned at the midpoint of the line of text, minus the radius. The left is positioned at the edge of the vertical line, minus the radius, minus the one pixel corresponding to half the line width.

      Lines 62 and 63 set the size of the block, and lines 64 and 65 style it as a circle.

      Applying this styling produces:

      Expand and collapse buttons

      Finally, we add the expand and collapse buttons:

      .tree summary::before  z-index : 1;  background : #696 url('expand-collapse.svg') 0 0; >  .tree details[open] > summary::before  background-position : calc(-2 * var(--radius)) 0; >

      Line 69 causes the button to be displayed on top of the marker created previously. As the marker was created using ::after it would otherwise be displayed on top of the button.

      Lines 70 and 74 show plus and minus signs in the buttons. You can download expand-collapse.svg (199 bytes) for use on your own site.

      Applying this styling produces the finished tree view:

      The finished code

      Combining all of the above leads to the finished code:

       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 

      .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  z-index : 1;  background : #696 url('expand-collapse.svg') 0 0; >  .tree details[open] > summary::before  background-position : calc(-2 * var(--radius)) 0; >

      Источник

      Читайте также:  Авторские работы в дереве