Javascript sliding menu TreeView [Javascript]

 

Preface

This slide menu has been written for a long time and was not used at the time. Now I have to use it and turn it out. After all, I did not download it from the Internet, but I wrote it myself. So I 'd like to share it with you, I think I should try to write it myself if I have time :)

 

Body

Let's take a look:

The effect is normal. I think it's okay, that is, sometimes shaking when shrinking. I don't quite understand :-(

The following is the JavaScript code for calling, which is more convenient:

<Script type = "text/javascript" defer>
Var tree = new TreeView ("tree ");
//-1 indicates the top layer, unique number, text content, Link, whether to display (1 shows 0 does not display), pop-up type
Tree. Nodes = [
[-, 'Basic information', '#', 0,],
[-1, 2, 'points related content', '#', 1,],
[1, 21, 'change password', '#',],
[, 'Reset password', '#',],
[, 'Modify information', '#',],
[, 'Modify details ',' # ',],
[, 'Logout log', '#',],
[, 'Points rule', '#',],
[, 'Point turntable ',' # ',],
[, 'Points sale', '#',],
[2, 14, 'faq ',' # ',],
[, 'Score record query', '#',],
[2, 16, 'consumption record query', '#',],
[2, 17, 'query expired credits ',' # ',]
];
Tree. Show (document. getElementById ("menu "));
</Script>

1. this menu is the id of the DIV. Add <div id = "menu"> </div> to the body. Add defer to js, or place the js Code behind the div.

2. The current implementation is to expand one by one without shrinking other columns. The other columns are also written in TreeView. js. Just call noneExpand before expanding or shrinking.

3. Note that currently only applicable to the second-level column

 

Demo:

TreeView

 

End

Do it yourself !! Thank you for your advice and criticism :)