A Vanilla JS Package To Convert A Nested List Into A Tree Menu | listree

listree is a very lightweight JavaScript library for creating a simple, clean, and collapsible tree structure from nested HTML lists. Great for list trees, folder/file trees, and much more.

How to make use of it:

1. Download the package deal and insert the listee’s files into the doc.

<link rel="stylesheet" href="./dist/listree.min.css"/>
<script src="./dist/listree.umd.min.js"></script>

2. Create a nested HTML listing with the next CSS classes:

<ul class="listree">
  <li>
    <div class="listree-submenu-heading">Item 1</div>
    <ul class="listree-submenu-items">
      <li>
        <div class="listree-submenu-heading">Item 1-1</div>
          <ul class="listree-submenu-items">
            <li>
              <div class="listree-submenu-heading">Item 1-1-1</div>
                <ul class="listree-submenu-items">
                  <li>
                    <div class="listree-submenu-heading">Item 1-1-1-1</div>
                      <ul class="listree-submenu-items">
                      <li>
                        <a href="">Item 1-1-1-1-1</a>
                      </li>
                      <li>
                        <a href="">Item 1-1-1-1-2</a>
                      </li>
                      </ul>
                  </li>
                </ul>
            </li>
          </ul>
      </li>
    </ul>
  </li>
  // more list items here
</ul>

3. Initialize the library and complete it.

listree();

Minimal Tree View Based On Nested Lists, listree Plugin/Github

Read More – 

Vuetify Drag And Drop Draggable Tree View Component | v-treeview
Standalone Tree View In Vanilla JavaScript Library | vanillatree


See Demo And Download

Official Website(SuryaSankar): Click Here

This superior jQuery/javascript plugin is developed by SuryaSankar. For extra Advanced Usage, please go to the official website.

Share