Skip to content

File Tree View using HTML and CSS

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>File Tree View | CodeMasala</title>
        
        <!--Bootstrap Link-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootsrap.min.css">
        
        
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css">
        
        <!--Style.css link-->
        
        <link rel="stylesheet" href="style.css">
        
        
    </head>
    <body>
         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
        
        <div class="tree">
            <ul>
                <li> <i class="fa fa-folder-open"></i>Project
                    <ul>
                        <li> <i class="fa fa-folder-open">Opened Folder</i><span>-15kb</span>
                        <ul>
                            <li><i class="fa fa-folder-open"></i>css
                                <ul>
                                    <li><i class="fa fa-folder-open"></i>CSS Files <span>-3kb</span></li>
                                </ul>
                            </li>
                            
                            <li> <i class="fa fa-folder"></i>Folder close <span>-10kb</span></li>
                            <li><i class="fab fa-html5"></i>index.html</li>
                            <li><i class="fa fa-picture-o"></i>favicon.ico</li>
                        </ul>
                        </li>
                        
                        <li><i class="fa fa-folder"></i>Folder close<span>-430kb</span></li>
                    </ul>
                </li> 
            </ul>
        </div>
        
    </body>
</html>
Output

style.css

body{
    font-size: 1rem;
    background: #f5f5f5;
}

.tree{
    position: relative;
    background: white;
    margin-top: 20px;
    padding: 30px;
    font-family: 'Roboto Mono', monospace;
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.5;
    color:#212529;
}

.tree span{
    font-size:13px;
    font-style: italic;
    letter-spacing: .4px;
    color: #a8a8a8;
}

.tree .fa-folder-open, .tree .fa-folder{
    color:#007bff;
}


.ree .fa-html5{
    color:#f21f10;
}

.tree ul{
    padding-left: 5px;
    list-style: none;
}

.tree ul li{
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:border-box;
    box-sizing: border-box;
}


.tree ul li:before{
    position: absolute;
    top:15px;
    left:0;
    width: 10px;
    height:1px;
    margin:auto;
    content:'';
    background-color: #666;
}


.tree ul li:after{
    position: absolute;
    top:0;
    bottom: 0;
    left:0;
    width:1px;
    height:100%;
    content:'';
    background-color: #666;
}

.tree ul li:last-child:after{
    height:15px;
}

.tree ul a{
    cursor: pointer;
}

.tree ul a:hover{
    text-decoration: none;
}

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *