jQuery Folder View is a javascript library that allows generate a hierarchical tree or multi-level accordion menu from nested HTML unordered lists. This plugin provides interactive trees. It supports HTML & JSON data sources and AJAX loading.
Features:
- Fully responsive and works great on every device (Desktop, Tablet, Mobile)
- Uses AJAX to fetch data.
- Expand/collapse event.
- Expand/collapse speeds.
Live Demo
How to Use
1. CSS
Add the css below to your html page
<link rel="stylesheet" href="http://onlinefreetools.net/wp-content/uploads/bootstrap4/bootstrapcustom.min.css" />
<link rel="stylesheet" href="http://onlinefreetools.net/wp-content/uploads/demo/menu/metismenu/css/metisMenu.min.css" />
<style>
.metisFolder {
padding-left: 0;
}
.metisFolder,
.metisFolder ul {
list-style: none;
}
.metisFolder li {
position: relative;
}
.metisFolder li a {
display: block;
padding-top: 5px;
padding-bottom: 5px;
color: #333;
text-decoration: none;
outline: 0 none;
}
.metisFolder ul:before {
position: absolute;
border-left: 1px dotted #333;
content: "";
width: 30px;
top: 25px;
left: 5px;
bottom: 17px;
}
.metisFolder ul>li:before {
position: absolute;
border-top: 1px dotted #333;
content: "";
width: 30px;
top: 13px;
left: -33px;
}
li.active>a>span.fa-folder-o:before {
content: "\f115" !important;
}
</style>
2. HTML
Create a container where you want to render folder view
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="nav">
<ul class="metisFolder metismenu">
<li>
<a href="#">
<span class="fa fa-fw fa-folder-o"></span>
Root
</a>
<ul>
<li>
<a href="#">
<span class="fa fa-fw fa-file"></span>
File 1
</a>
</li>
<li>
<a href="#">
<span class="fa fa-fw fa-folder-o"></span>
Folder
</a>
<ul>
<li>
<a href="#">
<span class="fa fa-fw fa-file"></span>
File 1
</a>
</li>
<li>
<a href="#">
<span class="fa fa-fw fa-folder-o"></span>
Folder
</a>
<ul>
<li>
<a href="#">
<span class="fa fa-fw fa-file"></span>
File 1
</a>
</li>
<li>
<a href="#">
<span class="fa fa-fw fa-file-excel-o text-danger"></span>
Excel
</a>
</li>
<li>
<a href="#">
<span class="fa fa-fw fa-file-pdf-o"></span>
PDF
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<span class="fa fa-fw fa-file-pdf-o"></span>
PDF
</a>
</li>
<li>
<a href="#">
<span class="fa fa-fw fa-folder-o"></span>
Folder
</a>
<ul>
<li>
<a href="#">
<span class="fa fa-fw fa-file"></span>
File 1
</a>
</li>
<li>
<a href="#">
<span class="fa fa-fw fa-folder-o"></span>
Folder
</a>
<ul>
<li>
<a href="#">
<span class="fa fa-fw fa-file"></span>
File 1
</a>
</li>
<li>
<a href="#">
<span class="fa fa-fw fa-file-excel-o text-danger"></span>
Excel
</a>
</li>
<li>
<a href="#">
<span class="fa fa-fw fa-file-pdf-o"></span>
PDF
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<span class="fa fa-fw fa-file-pdf-o"></span>
PDF
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<span class="fa fa-fw fa-file-pdf-o"></span>
PDF
</a>
</li>
<li>
<a href="#">
<span class="fa fa-fw fa-file-pdf-o"></span>
PDF2
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<span class="fa fa-fw fa-file-pdf-o"></span>
PDF
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
3. Javascript
Load jQuery library together with the Folder View library into your code
<script src="http://onlinefreetools.net/wp-content/uploads/demo/menu/metismenu/js/hor_metisMenu.min.js"></script>
<script>
$(function () {
$('.metisFolder').metisMenu({
toggle: false
});
});
</script>
Source Code
DownloadFor more Advanced Usages, please check the demo page or visit the official website.
