Monday, February 2, 2015

Folder Tree

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();
    
 });

Load disqus comments

6 comments

  1. Ini kegunaannya untuk apa mbak >>???

    ReplyDelete
    Replies
    1. Untuk menyortir data dengan list dan sub listnya

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

    ReplyDelete
  3. kak gimana caranya agar blog kakak rangkingnya tinggi kak by: fitra

    ReplyDelete

Silakan tambahkan komentar sesuai dengan topik, terima kasih.