Pure CSS Tree

index.html

<header>
  <h1>Pure <strong>CSS</strong> Tree</h1>
  <p>...a folders tree view, without JS :P</p>
</header>
<ul id="compositions-list" class="pure-tree main-tree">
  <li>
    <input type="checkbox" id="trigger-views" checked="checked">
    <label for="trigger-views">views</label>
    <ul class="pure-tree">
      <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
      <li>
        <input type="checkbox" id="trigger-layout">
        <label for="trigger-layout">layout</label>
        <ul class="pure-tree">
          <li>
            <input type="checkbox" id="trigger-base">
            <label for="trigger-base">base</label>
            <ul class="pure-tree">
              <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
            </ul>
          </li>
          <li>
            <input type="checkbox" id="trigger-footer">
            <label for="trigger-footer">footer</label>
            <ul class="pure-tree">
              <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <input type="checkbox" id="trigger-partials">
        <label for="trigger-partials">partials</label>
        <ul class="pure-tree">
          <li>
            <input type="checkbox" id="trigger-header">
            <label for="trigger-header">header</label>
            <ul class="pure-tree">
              <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
            </ul>
          </li>
          <li>
            <input type="checkbox" id="trigger-list">
            <label for="trigger-list">list</label>
            <ul class="pure-tree">
              <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
            </ul>
          </li>
          <li>
            <input type="checkbox" id="trigger-message">
            <label for="trigger-message">message</label>
            <ul class="pure-tree">
              <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
            </ul>
          </li>
          <li>
            <input type="checkbox" id="trigger-panel">
            <label for="trigger-panel">panel</label>
            <ul class="pure-tree">
              <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
            </ul>
          </li>
          <li>
            <input type="checkbox" id="trigger-prompt">
            <label for="trigger-prompt">prompt</label>
            <ul class="pure-tree">
              <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
            </ul>
          </li>
          <li>
            <input type="checkbox" id="trigger-sub-header">
            <label for="trigger-sub-header">sub-header</label>
            <ul class="pure-tree">
              <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <input type="checkbox" id="trigger-ui">
        <label for="trigger-ui">ui</label>
        <ul class="pure-tree">
          <li>
            <input type="checkbox" id="trigger-box-color">
            <label for="trigger-box-color">box-color</label>
            <ul class="pure-tree">
              <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
            </ul>
          </li>
          <li>
            <input type="checkbox" id="trigger-button">
            <label for="trigger-button">button</label>
            <ul class="pure-tree">
              <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
            </ul>
          </li>
          <li>
            <input type="checkbox" id="trigger-charts">
            <label for="trigger-charts">charts</label>
            <ul class="pure-tree">
              <li>
                <input type="checkbox" id="trigger-border">
                <label for="trigger-border">border</label>
                <ul class="pure-tree">
                  <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                </ul>
              </li>
              <li>
                <input type="checkbox" id="trigger-progress">
                <label for="trigger-progress">progress</label>
                <ul class="pure-tree">
                  <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <input type="checkbox" id="trigger-check">
            <label for="trigger-check">check</label>
            <ul class="pure-tree">
              <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
            </ul>
          </li>
          <li>
            <input type="checkbox" id="trigger-dropdown">
            <label for="trigger-dropdown">dropdown</label>
            <ul class="pure-tree">
              <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
            </ul>
          </li>
          <li>
            <input type="checkbox" id="trigger-input">
            <label for="trigger-input">input</label>
            <ul class="pure-tree">
              <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
            </ul>
          </li>
          <li>
            <input type="checkbox" id="trigger-radio">
            <label for="trigger-radio">radio</label>
            <ul class="pure-tree">
              <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
            </ul>
          </li>
          <li>
            <input type="checkbox" id="trigger-rating-stars">
            <label for="trigger-rating-stars">rating-stars</label>
            <ul class="pure-tree">
              <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
            </ul>
          </li>
          <li>
            <input type="checkbox" id="trigger-textarea">
            <label for="trigger-textarea">textarea</label>
            <ul class="pure-tree">
              <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
            </ul>
          </li>
          <li>
            <input type="checkbox" id="trigger-toggle">
            <label for="trigger-toggle">toggle</label>
            <ul class="pure-tree">
              <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Pure CSS Tree.markdown

Pure CSS Tree

A folders tree view, without JS :P

Forked from Rafael González's Pen Pure CSS Tree.

A Pen by betul on CodePen.

License.

style.css

@import 'compass/reset';
@import 'compass/css3';
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,300);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fa-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

body
{
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1em;

    text-align: center;

    color: #444444;
    background-color: #d0d0d0;
}
h1
{
    font-size: 2.5em;

    margin: 2em 0 1em;
}
h2
{
    margin-bottom: 3em;
}
em,
strong
{
    font-weight: 700;
}
input
{
    display: none;
}
header p 
{
    margin-bottom: 2em;
}
section
{
    margin-bottom: 2em;
    padding: 0;
    &:last-of-type
    {
        margin-bottom: 0;
    }
}
p
{
    line-height: 1.5em;
}
.container
{
    z-index: 1;
    margin-bottom: 4em;
}


.pure-tree
{
    text-align: left;
    display: block;
    &.main-tree
    {
        width: 30em;
        display: inline-block;
    }
    &:not(.main-tree)
    {
        padding-left: 1.2em;
        li
        {
            overflow: hidden;
            height: 0;
            display: block;
        }
    }
    label
    {
        display: block;
        cursor: pointer;
        color: #717780;
        border-bottom: 1px dashed #B0B9C5;
        padding: 1.125em 1.125em 1.125em 0;
        &:before
        {
            width: 1em;
            height: 1em;
            line-height: 1em;
            display: inline-block;
            font-family: 'FontAwesome', sans-serif;
            content: "\f114";
            padding-right: .75em;
        }
        &:hover
        {
            color: #434a58;
            border-bottom-color: #434a58;
        }
    }
    .pure-tree_link
    {
        a
        {
            padding: 1.500em 1.125em 0.750em 0;
            display: block;
            border-radius: .2em;
            color: #717780;
            text-decoration: none;
            &:hover
            {
                color: #434a58;
            }
        }
    }
    &.nested
    {
        padding-left: 1.7em;
    }
    [type="checkbox"]
    {
        display: none;
        &:checked + label 
        {
            color: #434a58;
            border-bottom-color: #434a58;
        }
        &:checked ~ ul > li
        {
            height: auto;
        }
    }
}