Pull to refresh

Многоуровневое дерево с маркерами (только HTML, CSS, без Javascript)

Reading time 5 min
Views 23K
Многоуровневое дерево с маркерами (только HTML, CSS)До того как заняться верской гитарных аккордов (статьи 1,2,3) я столкнулся с необходимостью сделать человеку на сайте меню-дерево. Рисовать не хотелось вообще, поэтому я взял старый добрый HTML с CSS и начал делать это дерево, начал с простого одноуровневого, а позже сделал многоуровневое с маркерами, которое и представлю.

Позже это дерево дало мне плоды в виде habrahabr.ru/blogs/css/53792

Многоуровневое дерево


В реализации используется исключительно HTML и CSS, никаких картинок.
Для отрисовки маркера раскрытия списка использовал CSS прием с границами нулевого размера блока.

Написано продолжение со скриптами.

HTML

<div id="multi-derevo">
 <h4><a href="#">Ствол дерева</a></h4>
 <ul>
  <li><span><a href="#1"><em class="marker open"></em>1. Ветка</a></span>
   <ul>
   <li><span><a href="#11" class="current" title="Выбранный раздел"><em class="marker open"></em>1.1. Ветка</a></span>
    <ul>
     <li><span><a href="#111">1.1.1. Листик</a></span></li>
     <li><span><a href="#112">1.1.2. Листик</a></span></li>
    </ul>
   </li>
   <li><span><a href="#12">1.2. Ветка</a></span></li>
   </ul>
  </li>
  <li><span><a href="#2"><em class="marker"></em>2. Ветка</a></span></li>
  <li><span><a href="#3"><em class="marker"></em>3. Ветка</a></span></li>
  <li><span><a href="#4"><em class="marker"></em>4. Ветка</a></span></li>
  <li class="last"><span><a href="#5" title="Послледняя ветка"><em class="marker open"></em>5. Ветка, верхушка</a></span>
   <ul>
   <li><span><a href="#1">5.1. Ветка</a></span></li>
   <li><span><a href="#1">5.2. Ветка</a></span></li>
   </ul>
  </li>
 </ul>
</div><!-- /multi-derevo -->



CSS

/* общий стиль */
  body {font-family: Arial, Tahoma, sans-serif; margin: 2em; font-size: 62.5%;}
  p {
   font-size: 1.2em;
  }
  a {
   color: #0066cc;
   text-decoration: none;
   outline: none;
  }
  /*a:link {
   color: #0066cc; 
  }
  a:visited {color: #00cc63; }*/ 
  a:hover {
   text-decoration: underline;
  }
  a:active, a:focus {
   color: #666;
   background-color: #f4f4f4;
  }
  a.current {
   color: black;
   font-weight: bold;
  }

  /* Дерево многоуровневое
  -------------------------------- */
  #multi-derevo {
   width: 220px; /* блок под дерево */
   border: solid; /* границы блока */
   border-color: silver gray gray silver;
   border-width: 2px;
   padding: 0 0 1em 0; /* нижний отступ */
   font-size: 1.3em;
  }
   span { /* обертка пункта */
     text-decoration: none;
     display: block; /* растянем до правого края блока */
     margin: 0 0 0 1.2em;     
     background-color: transparent;
     border: solid silver; /* цвет линий */ 
     border-width: 0 0 1px 1px; /* границы: низ и лево */
   }
    span a {/* тест элемента дерева */
      display: block;
      position: relative;
      top: .95em; /* смещаем узел на середину линии */
      background-color: #fff; /* закраска в цвет фона обязательна иначе будет видно линию */
      margin: 0 0 .2em .7em; /* делаем промежуток между узлами, отодвигаем левее  */
      padding: 0 0.3em; /* небольшой отступ от линии */
     }
    h4 {/* заголовок дерева */
     font-size: 1em;
     font-weight: bold;
     margin: 0;
     padding: 0 .25em;
     border-bottom: 1px solid silver;
    }
   h4 a {
     display: block;
   }
   ul, li {
     list-style-image:none;
     list-style-position:outside;
     list-style-type:none;
     margin:0;
     padding:0;
   }
     ul li {
      line-height: 1.2em;
     }
      ul li ul {}
        ul li ul li {
         margin: 0 0 0 1.2em;
         border-left: 1px solid silver; /* цвет вертикальной линии между узлами */
        }
        ul li.last ul li {/* последний узел, соединительную линию к след. узлу убираем */
         border: none; 
        }
   .marker { /* маркер раскрытия списка в закрытом состоянии */
     border-color: transparent transparent transparent gray;
     border-style: solid;
     border-width: .25em 0 .25em .5em; 
     margin: .35em .25em 0 0;
     float: left;
     width: 0px;
     height: 0px;
     line-height: 0px;
   }
   .marker.open {/* маркер раскрытия списка в открытом состоянии */
     border-color: gray transparent transparent transparent;
     border-width: .5em .25em 0 .25em; 
   }
  /* IE 6 Fixup */
  * html #multi-derevo * { height: 1%;}
  * html .marker { border-style: dotted dotted dotted solid; }
  * html .open { border-style: solid dotted dotted dotted; }


* This source code was highlighted with Source Code Highlighter.


Посмотрите код полностью и рабочий пример.

Продолжение темы в статье. Узлы теперь разворачиваются, как многие ожидали.

Проверено в FF3, IE6-8, Opera 9, Google Chrome, Safari 4 Beta.

Обновления:
UPD 28.03.2009: внесены изменения для поддержки IE 6 (спасибо alemiks);
UPD 30.03.2009: работает в IE6, Mac OS X 10.5.6 Safari 4 Beta и Firefox 3.0.0.7, IE8 под Win7 (проверил anton_ivanov), исправлены опечатки в тексте (спасибо ferrari).
UPD 31.03.2009: Добавлено в css для ссылок outline: none, заданны :active, :focus. Демонстрационный пример обновлен.
UPD 04.04.2009: Код доработан с применением jQuery. Теперь узлы раскрываются. Подробно в статье.
UPD 19.05.2011: Сделан вариант с запоминанием состояния дерева в Cookies .
UPD 24.02.2012: Сделан второй вариант оформления по запросу sanch3z .
Tags:
Hubs:
+103
Comments 81
Comments Comments 81

Articles