jQuery Folder View Plugin – metisMenu.js

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

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>

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>

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

Download

For more Advanced Usages, please check the demo page or visit the official website.