Ajax Loader
HTML 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
1
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
2
 
3
<div class="menu">
4
  <h2>Project Tree</h2>
5
  <ul class="tree">
6
    <li><span class="branch"><i class="fa fa-folder-o"></i> Project-1</span>
7
      <ul class="tree">
8
        <li>
9
          <span class="branch"><i class="fa fa-folder-o"></i> Sub-Project</span>
10
          <ul class="tree">
11
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
12
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
13
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-3</span></li>
14
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-4</span></li>
15
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-5</span></li>
16
          </ul>
17
        </li>
18
        <li>
19
          <span class="branch"><i class="fa fa-folder-o"></i> Sub-Project2</span>
20
          <ul class="tree">
21
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
22
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
23
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-3</span></li>
24
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-4</span></li>
25
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-5</span></li>
26
          </ul>
27
        </li>
28
        <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
29
        <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
30
        <li><span class="Leaf"><i class="fa fa-file-o "></i> File-3</span></li>
31
        <li><span class="Leaf"><i class="fa fa-file-o "></i> File-4</span></li>
32
        <li><span class="Leaf"><i class="fa fa-file-o "></i> File-5</span></li>
33
      </ul>
34
    </li>
35
    <li>
36
      <span class="branch"><i class="fa fa-folder-o"></i> Project-2</span>
37
      <ul class="tree">
38
        <li><span class="branch"><i class="fa fa-folder-o"></i> Project</span>
39
          <ul class="tree">
40
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
41
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
42
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-3</span></li>
43
          </ul>
44
        </li>
45
        <li>
46
          <span class="branch"><i class="fa fa-folder-o"></i> Project</span>
47
          <ul class="tree">
48
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
49
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
50
          </ul>
51
        </li>
52
        <li><span class="branch"><i class="fa fa-folder-o"></i> Project</span>
53
          <ul class="tree">
54
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
55
          </ul>
56
        </li>
57
      </ul>
58
    </li>
59
    <li>
60
      <span class="branch"><i class="fa fa-folder-o"></i> Project-3</span>
61
          <ul class="tree">
62
            <li><span class="Leaf"><i class="fa fa-file-o"></i> File-1</span></li>
63
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
64
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-3</span></li>
65
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-4</span></li>
66
            <li><span class="Leaf"><i class="fa fa-file-o "></i> File-5</span></li>
67
          </ul>
68
    </li>
69
    <li>
70
      <span class="branch"><i class="fa fa-folder-o"></i> Project-4</span>
71
      <ul class="tree">
72
        <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
73
        <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
74
      </ul>
75
    </li>
76
    <li>
77
      <span class="branch"><i class="fa fa-folder-o"></i> Project-5</span>
78
      <ul class="tree">
79
        <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
80
      </ul>
81
    </li>
82
  </ul>
83
 
84
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS 
body{background:#87C540; font-family: arial; color:#fff}
1
body{background:#87C540; font-family: arial; color:#fff}
2
 
3
.menu{
4
  width: 300px;
5
  margin: auto;
6
}
7
.tree{
8
  list-style: none;
9
  padding-left: 20px;
10
  position: relative;
11
  color: #fff;
12
}
13
.tree:before{
14
  content: '';
15
  width: 1px;
16
  background: #fff;
17
  top: 0;
18
  bottom:7px;
19
  left:0;
20
  position: absolute;
21
}
22
.tree li{
23
  position: relative;
24
  margin-top:10px;
25
}
26
.tree li:hover, .tree li:focus{
27
  color: #FFD000;
28
  cursor: pointer;
29
}
30
.tree li:before{
31
  content: '';
32
  width: 20px;
33
  height: 1px;
34
  background: #fff;
35
  top: 12px;
36
  left:-20px;
37
  position: absolute;
38
}
39
.tree .tree{display: none;}
 
JavaScript 
  $('.branch').click(function(){
1
  $('.branch').click(function(){
2
     $(this).children().toggleClass('fa-folder-open-o');
3
    $(this).next().slideToggle();
4
  
5
  });
6
 
 

Treestyle list

CSSDeck G+