psnet / simple-tree

Simple Tree - простое сворачиваемое дерево на чистом CSS без использования JS и изображений

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Simple Tree

Простое сворачиваемое дерево на чистом CSS без использования JS и изображений.

Демо

http://psnet.github.io/simple-tree/demo/

Часть кода из демо:

<ul class="simple-tree">
  <li>
    <input type="checkbox" checked="checked" id="simple-tree-item-1" />
    <label for="simple-tree-item-1">Folder</label>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
  <li>
    <input type="checkbox" checked="checked" id="simple-tree-item-2" />
    <label for="simple-tree-item-2">Folder</label>
    <ul>
      <li>
        <input type="checkbox" checked="checked" id="simple-tree-item-3" />
        <label for="simple-tree-item-3">Folder</label>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>

Подключение

  • Подключить CSS файл
  • Создать html код по примеру кода из демо

Лицензия

(P) PSNet 2014, http://psnet.lookformp3.net

Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)

About

Simple Tree - простое сворачиваемое дерево на чистом CSS без использования JS и изображений


Languages

Language:HTML 53.4%Language:CSS 46.6%