macOS Finder Like Tree View Plugin - jQuery simpleTreeMenu

macOS Finder Like Tree View Plugin - jQuery simpleTreeMenu

simpleTreeMenu is a lightweight and easy-to-use jQuery plugin used to render Mac OS Finder like folder tree, file browser or tree structure from nested HTML lists.

1. The basic HTML structure for the tree menu. The plugin supports unlimited number of menu levels using nested HTML unordered lists as follows:

<ul id="demoTree">
  <li>
    <span class="stm-icon"></span>
    <span class="stm-content">News Sites</span>
    <ul>
        <li>
            <span class="stm-icon"></span>
            <a class="stm-content" href="http://news.bbc.co.uk">BBC News</a>
        </li>
        <li>
            <span class="stm-icon"></span>
            <a href="http://www.theguardian.com" class="stm-content">This link to The Guardian is also a node</a>
            <ul>
                <li>
                    <span class="stm-icon"></span>
                    <a class="stm-content" href="http://www.theguardian.com/uk/sport">UK Sport</a>
                </li>
                <li>
                    <span class="stm-icon"></span>
                    <a class="stm-content" href="http://www.theguardian.com/uk/business">UK Business</a>
                </li>
            </ul>
        </li>
    </ul>
  </li>
  <li>
    <span class="stm-icon"></span>
    <span class="stm-content">Embedded Content</span>
    <ul>
        <li>
            <span class="stm-icon"></span>
            <span class="stm-content">Your Calendar</span>
            <div style="background-color: #A0C050; height: 50px; padding: 10px; border: 2px solid #604030">
                (calendar here)
            </div>
        </li>
        <li>
            <span class="stm-icon"></span>
            <span class="stm-content">An image</span>
            <br />
            <img src="http://placehold.it/100x100" />
        </li>
    </ul>
  </li>
</ul>

2. Import jQuery JavaScript library and the jQuery simpleTreeMenu plugin's JavaScript & CSS into the document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="jquery-simpleTreeMenu.js"></script>
<link href="jquery-simpleTreeMenu.css" rel="stylesheet">

3. Active the tree menu by calling the function on the top list.

$('#demoTree').simpleTreeMenu();

This awesome jQuery plugin is developed by sfreytag. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 22.02.2018
  • Source