❤
npm
Sign UpSign In

stylie.treeview

1.0.1 • Public • Published

stylie.treeview

Pure CSS collapsible tree menu, ported from: http://www.thecssninja.com/css/css-tree-menu

Basic HTML structure

    <ol>
        <li class="file"><a href="document.pdf">File 1</a></li>
        <li>
            <label for="subfolder1">Subfolder 1</label>
            <input type="checkbox" id="subfolder1" />
            <ol>
                <li class="file"><a href="">File 2</a></li>
                <li class="file"><a href="">File 2</a></li>
                <li class="file"><a href="">File 2</a></li>
            </ol>
        </li>
    </ol>

CSS for treeview

li input {
    position: absolute;
    left: 0;
    margin-left: 0;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
    height: 1em;
    width: 1em;
    top: 0;
}
li label {
    background: url(folder-horizontal.png) 15px 1px no-repeat;
    cursor: pointer;
    display: block;
    padding-left: 37px;
}
li input + ol {
    background: url(toggle-small-expand.png) 40px 0 no-repeat;
    margin: -0.938em 0 0 -44px; /* 15px */
    display: block;
    height: 1em;
}
li input + ol > li {
    display: none;
    margin-left: -14px !important;
    padding-left: 1px;
}
li label {
    background: url(folder.png) 15px 1px no-repeat;
}
li.file a {
    background: url(document.png) 0 -1px no-repeat;
    color: #fff;
    padding-left: 21px;
    text-decoration: none;
    display: block;
}
li {
    position: relative;
    margin-left: -15px;
    list-style: none;
}
li.file {
    margin-left: -1px !important;
}
li.file a[href $= '.pdf']     { background-position: -16px -1px; }
li.file a[href $= '.html']    { background-position: -32px -1px; }
li.file a[href $= '.css']     { background-position: -48px -1px; }
li.file a[href $= '.js']      { background-position: -64px -1px; }

Generate with javascript

Sample json data

var sampletree = {
    "tree": [{
        "tree-item": "file",
        "tree-item-label": "File Main 1",
        "tree-item-id": "file1",
        "tree-item-link": "#mainlink",
        "tree-item-attributes": {
            "class": "added-async-link another-class",
            "title": "this is a file link"
        }
    }, {
        "tree-item": "folder",
        "tree-item-label": "Folder 2",
        "tree-item-id": "folder2",
        "tree-item-attributes": {
            "class": "added-async-link another-class",
            "title": "this is a file link"
        },
        "tree-item-folder-contents": [{
            "tree-item": "file",
            "tree-item-label": "File Main 3",
            "tree-item-id": "file3",
            "tree-item-link": "#mainlink",
            "tree-item-attributes": {
                "class": "added-async-link another-class",
                "title": "this is a file link"
            }
        }, {
            "tree-item": "file",
            "tree-item-label": "File Main 4",
            "tree-item-id": "file4",
            "tree-item-link": "#mainlink",
            "tree-item-attributes": {
                "class": "added-async-link another-class",
                "title": "this is a file link"
            }
        }]
    }]
};
 

HTML container to insert

<div id="tree-example-1" class="ts-col-span6 ">
</div>

Javascript helper to generate markup

var StylieTreeview = require('stylie.treeview'),
    tree1 = sampletree,
    StylieTreeview1;
 
window.addEventListener('load', function () {
    StylieTreeview1 = new StylieTreeview({
        tree: tree1
    });
    document.querySelector('#tree-example-1').innerHTML = StylieTreeview1.getTreeHTML();
}, false);

Development

Make sure you have grunt installed

$ npm install -g grunt-cli

Then run grunt watch

$ grunt watch

For generating documentation

$ grunt doc
$ jsdoc2md lib/**/*.js index.js > doc/api.md

Readme

Keywords

Package Sidebar

Install

npm i stylie.treeview

Repository

github.com/typesettin/stylie.treeview

Homepage

github.com/typesettin/stylie.treeview#readme

Weekly Downloads

3

Version

1.0.1

License

none

Last publish

Collaborators

  • promisefinorg
Try on RunKit
Report malware