treeview checkbox menus

Question

well, I am trying to write parallel checkbox menus in html, but somehow my logic is not helping. May be some of you experts can just help me a bit. This is how I want my menus to look

[] Menu 1                   [] Menu 2

   [] Item 1                  [] Item 5

   [] Item 2                  [] Item 4

Item 1, 2 are under Menu 1 and 5,4 are under Menu 2. Square brackets indicate checkboxes. Items under menus are actually collected dynamically and their numbers under different menus can vary.

Answer 1

If your question is only about HTML and CSS, you can use padding and margin attributes to make appropriate indent.

If yuor question about programming logic for generating such tree structure, write please what language you are using.

Answer 2

I would suggest using lists and floated divs. Lists can make it easy to nest as many checkbox trees as you'd like.

<div style="float:left;">
Menu 1
<ul>
    <li>Item 1</li>
    <li>Item 2
     <ul>
     <li>Item 2a</li>
     <li>Item 2b</li>
     </ul>
    </li>
</ul>
</div>

<div style="float:left; margin-left:30px;">
Menu 2
<ul>
    <li>Item 1</li>
    <li>Item 2
     <ul>
     <li>Item 2a</li>
     <li>Item 2b</li>
     </ul>
    </li>
</ul>
</div>

This would have double nesting. You can make as many checkboxes as you want at a certain indent interval by just adding more list items <li> to a given unordered list <ul> tag.

Answer 3

You might want to look at the jquery library jstree. I use that for my treeview, it's definitely the most advanced treeview available.
it is amazingly configurable, and easy to use. it has a checkbox plugin that I use in my project. That works perfectly for me.
The development is very active, so even if you might find an issue, the developer is very reactive and will help you.

take a look here : http://jstree.com and the checkbox demo is here

good luck :)