ArtShok. Сайтостроение и немного SEO

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

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

   <ul class="tree">
    <li>Продукты
     <ul>
      <li>Молочные
       <ul>
        <li>Молоко</li>
        <li>Кефир</li>
       </ul>
      </li>
      .
      .
      .
   </ul>

По сути, это простой многоуровневый список. Единственная вещь, превращающая его его в “дерево” - класс tree, который мы присвоили <ul>. Без него список выглядит самым обычным образом:

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

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

ul.tree, ul.tree ul {list-style-type: none;}

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

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

vline.png

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

   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;
   }<strong>

   </strong>ul.tree li {
     margin: 0;
     padding: 0 12px;
   }

Объединяем

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

node.png

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

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

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

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

lastnode.png

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

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

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

   <ul class="tree">
    <li>Animals
     <ul>
      <li>Birds</li>
      <li>Mammals
       <ul>
        <li>Elephant</li>
        <li<strong> </strong>class="last">Mouse</li>
       </ul>
      </li>
      <li<strong> </strong>class="last">Reptiles</li>
      .
      .
      .
   </ul>

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

   <script type="text/javascript">
    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";
      }
    };
   </script>
  .
  .
  .
   <ul class="tree"<strong> </strong>id="tree">
    <li>Animals
     <ul>
      <li>Birds</li>
      <li>Mammals
       <ul>
        <li>Elephant</li>
        <li>Mouse</li>
       </ul>
      </li>
      .
      .
      .
   </ul>

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

   ul.tree li<strong>:</strong>last-child {
     background: #fff url(lastnode.png) no-repeat;
   }

К сожалению, данный псевдо-класс используется только в CSS3 и лишь некоторые браузеры его поддерживают.

Скачать урок

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

Рекомендуемые статьи:

• 5 способов красивого оформления посещенных ссылок с помощью CSS
• jQuery пример: красивая смена текста за 10 минут
• Меню на CSS+jQuery (гаражные двери)
• Иконизируем ссылки
• Градиентный текст с помощью CSS (без флэш и javascript)
• Украшаем формы с помощью CSS и jQuery - часть 1
• Реализация меню с помощью списка (form)

Обязательно к использованию: