Главная -> CSS -> Как сделать древовидный список с помощью CSS

Как сделать древовидный список с помощью CSS

Сегодня мы рассмотрим урок по созданию древовидного списка, каждый из пунктов которого соединяется линиями.

Если не засорять код чем-то лишним, то в идеале он будет выглядеть следующим образом:

[php]


  • Продукты

    • Молочные

      • Молоко

      • Кефир



    • .
      .
      .

    [/php]

    По сути, это простой многоуровневый список. Единственная вещь, превращающая его его в “дерево” класс tree, который мы присвоили

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

      • Продукты
        • Молочные
          • Молоко
          • Ряженка
          • Кефир
        • Овощи
        • Фрукты
      • Столовые приборы
        • Ложки
          • Суповые
          • Десертные
          • Чайные
        • Вилки

      Избавляемся от “пуль”

      Первое, что мы теперь должны сделать, это избавиться от так называемых “пуль” точки, квадратики, кружочки и пр., расположенных напротив позиций списка. Для этого присваиваем list-style-type значение none.

      [css]
      ul.tree, ul.tree ul {list-style-type: none;}
      [/css]

      Рисуем вертильные линии

      Теперь необходимо нарисовать вертикальную прямую напротив каждого из пункта вне зависимости от уровня вложения. Для этого используем следующую картинку (ширина 1px, высота 10px):

      vline.png

      Прописываем ее фоном для списка

        и добавляем значение repeat-y, теперь картинка будет повторяться по оси y, тем самым создавая вертикальную прямую по высоте всего спика. Добавляем значение для margin и padding к
      • , тем самым красиво форматируя будущую структуру списка.

        [css]
        ul.tree, ul.tree ul {
        list-style-type: none;
        background: url(vline.png) repeat-y;
        margin: 0;
        padding: 0;
        }

        ul.tree ul {
        margin-left: 10px;
        }

        ul.tree li {
        margin: 0;
        padding: 0 12px;
        }
        [/css]

        Объединяем

        Используем фоном картинку с Т-образной линией для каждого из пунктов.

        node.png

        Устанавливаем значение line-height, равное высоте картинки. Для текса определяем цвет #369 и выделяем жирным bold.

        [css]
        ul.tree, ul.tree ul {
        list-style-type: none;
        background: url(vline.png) repeat-y;
        margin: 0;
        padding: 0;
        }

        ul.tree ul {
        margin-left: 10px;
        }

        ul.tree li {
        margin: 0;
        padding: 0 12px;
        line-height: 20px;
        background: url(node.png) no-repeat;
        color: #369;
        font-weight: bold;
        }
        [/css]

        И последнее:)

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

        lastnode.png

        Во-вторых, вертикальная линия в списке должна заканчиваться на последней записи. Исправляем это следующим образом устанавливаем для последней записи цвет фона (белый или тот, который используете). Таким образом, фоновый рисунок пункта списка перекроет фон всего списка, заменив последний сегмент вертикальной линии.

        [css]
        ul.tree, ul.tree ul {
        list-style-type: none;
        background: url(vline.png) repeat-y;
        margin: 0;
        padding: 0;
        }

        ul.tree ul {
        margin-left: 10px;
        }

        ul.tree li {
        margin: 0;
        padding: 0 12px;
        line-height: 20px;
        background: url(node.png) no-repeat;
        color: #369;
        font-weight: bold;
        }

        ul.tree li.last {
        background: #fff url(lastnode.png) no-repeat;
        }
        [/css]

        Браузер не знает, какая из записей последняя, поэтому прописываем класс last там, где это необходимо:

        [css]


        • Animals

          • Birds

          • Mammals

            • Elephant

            • class="last">Mouse


          • class="last">Reptiles
            .
            .
            .

          [/css]

          …если лень используйте JavaScript, который сделает все сам:

          [php]

          window.onload = function () {
          var tree = document.getElementById("tree");
          var lists = [ tree ];

          for (var i = 0; i < tree.getElementsByTagName("ul").length; i++)
          lists[lists.length] = tree.getElementsByTagName("ul")[i];

          for (var i = 0; i < lists.length; i++) {
          var item = lists[i].lastChild;

          while (!item.tagName || item.tagName.toLowerCase() != "li")
          item = item.previousSibling;

          item.className += " last";
          }
          };

          .
          .
          .

            id="tree">
          • Animals

            • Birds

            • Mammals

              • Elephant

              • Mouse



            • .
              .
              .

            [/php]

            Конечно, каждый раз добавлять класс last это не лучший выход. Фактически, есть изящное решение данной проблемы псевдо-класс :last-child. Чтобы использовать его, присваиваем данный селектор к классу last:

            [php]
            ul.tree li:last-child {
            background: #fff url(lastnode.png) no-repeat;
            }
            [/php]
            К сожалению, данный псевдо-класс используется только в CSS3 и лишь некоторые браузеры его поддерживают.

            Скачать урок

            *Вольный перевод статьи Turning Lists into Trees

            Понравилась статья? Тогда подпишитесь на RSS, чтобы следить за обновлениями!

 

Продвижение сайтов в Республике Беларусь

Компания "Виста" предлагает продвижение сайтов в Республике Беларусь - первые 3 месяца бесплатно.