Folder Tree

2/02/2015
Folder Tree



<div class="menu">
  <h2>Folder Tree</h2>
 <ul class="tree">
  <li><span class="branch"><i class="fa fa-folder-o"></i> Project-1</span>
   <ul class="tree">
    <li>
     <span class="branch"><i class="fa fa-folder-o"></i> Sub-Project</span>
     <ul class="tree">
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-3</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-4</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-5</span></li>
     </ul>
    </li>
    <li>
     <span class="branch"><i class="fa fa-folder-o"></i> Sub-Project2</span>
     <ul class="tree">
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-3</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-4</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-5</span></li>
     </ul>
    </li>
    <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
    <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
    <li><span class="Leaf"><i class="fa fa-file-o "></i> File-3</span></li>
    <li><span class="Leaf"><i class="fa fa-file-o "></i> File-4</span></li>
    <li><span class="Leaf"><i class="fa fa-file-o "></i> File-5</span></li>
   </ul>
  </li>
  <li>
   <span class="branch"><i class="fa fa-folder-o"></i> Project-2</span>
   <ul class="tree">
    <li><span class="branch"><i class="fa fa-folder-o"></i> Project</span>
     <ul class="tree">
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-3</span></li>
     </ul>
    </li>
    <li>
     <span class="branch"><i class="fa fa-folder-o"></i> Project</span>
     <ul class="tree">
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
     </ul>
    </li>
    <li><span class="branch"><i class="fa fa-folder-o"></i> Project</span>
     <ul class="tree">
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
     </ul>
    </li>
   </ul>
  </li>
  <li>
   <span class="branch"><i class="fa fa-folder-o"></i> Project-3</span>
     <ul class="tree">
      <li><span class="Leaf"><i class="fa fa-file-o"></i> File-1</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-3</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-4</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-5</span></li>
     </ul>
  </li>
  <li>
   <span class="branch"><i class="fa fa-folder-o"></i> Project-4</span>
   <ul class="tree">
    <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
    <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
   </ul>
  </li>
  <li>
   <span class="branch"><i class="fa fa-folder-o"></i> Project-5</span>
   <ul class="tree">
    <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
   </ul>
  </li>
 </ul>

body {
    background: #79a0cb;
    font-family: arial;
    color: #fff;
}

.menu {
    width: 300px;
    margin: auto;
}

.tree {
    list-style: none;
    padding-left: 20px;
    position: relative;
    color: #fff;
}

.tree:before {
    content: '';
    width: 1px;
    background: #fff;
    top: 0;
    bottom: 7px;
    left: 0;
    position: absolute;
}

.tree li {
    position: relative;
    margin-top: 10px;
}

.tree li:hover, .tree li:focus {
    color: #edebb6;
    cursor: pointer;
}

.tree li:before {
    content: '';
    width: 20px;
    height: 1px;
    background: #fff;
    top: 12px;
    left: -20px;
    position: absolute;
}

.tree .tree {
    display: none;
}

 $('.branch').click(function(){
     $(this).children().toggleClass('fa-folder-open-o');
  $(this).next().slideToggle();
    
 });

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

6 comments

Ini kegunaannya untuk apa mbak >>???

Balas

Untuk menyortir data dengan list dan sub listnya

Balas

wah, ini yg dicari,.. Bisakan diaplikasikan ke MINIMA COLORED 2.1 mbak??

Balas

bisa, silakan disesuaikan kembali

Balas

kak gimana caranya agar blog kakak rangkingnya tinggi kak by: fitra

Balas

blog ini belum punya ranking

Balas

Silakan tambahkan komentar sesuai dengan topik, terima kasih.