Question

hello i am trying to create a tree like menu (kind of like the file explorer in windows)

i have created the “tree” view using

    <ul> and <li>

but i dont know how to create the part that is expands and collapses like the file explorer

this is the loop that creates the my tree

        for($i=0, $n=count($cats); $i<$n; $i++){
            if($levels[$cats[$i]->level] == 0)
            {
                $tmp_html .= '<ul>';
                $levels[$cats[$i]->level] = 1;
            }
            $tmp_html .= '<a href="index.php/component/users/?view=students&links=4&s='.$cats[$i]->value.'">';
            $tmp_html .= '<li>'.$cats[$i]->text.'</li>';
            $tmp_html .= '</a>';
            if(($i<$n-1)&&($cats[$i]->level>$cats[$i+1]->level)){
                $tmp_level = $cats[$i]->level - $cats[$i+1]->level;
                for($j=0; $j<$tmp_level; $j++){
                    $tmp_html .= '</ul>';
                    $levels[$cats[$i-$j]->level] = 0;
                }
            }
        }

how would give it the tree like action?

thank you in advance

Answer 1

You made the structure of your treeview, but you need to define the style of it or how it would be displayed on the page, and this is the job of CSS, so you just need to play around with Css, first you have to give your ul and li ids like :

<ul class="TreeView" id="TreeView">
  <li class="Collapsed"> First level 1 node
      <!-- level 2 nodes -->
      <ul>
         <li>First level 2 node</li>
         <li>Second level 2 node</li>
      </ul>
   </li>
</ul>

Then add the following style that makes your lists as you want:

.TreeView LI
{
  padding: 0 0 0 18px;
  float: left;
  width: 100%;
  list-style: none;
}  
LI.Expanded
{
   //
}
LI.Expanded ul
{
   display: block;
}
LI.Collapsed
{
   //
}
LI.Collapsed ul
{
   display: none;
} 

This example is just a simple two levels treeview the point is the Display property which makes the sub level visible :Block or collabsed :none.
This is just Simple CSS Based Treeview.
If you searched the web a little bit, you will find alot of tutorials on how to implement advanced treeviews with Css, JavaScript and jQuery like This.

Hope this will help.