Display unordered list as a horizontal binary tree

Question

Hi, I have a binary tree in unordered list that looks like this:

<ul>
<li>1
 <ul> 
  <li>2
   <ul> 
    <li>4
     <ul> 
      <li>8</li> 
      <li>--</li>
     </ul> 
    </li> 
    <li>5</li> 
   </ul> 
  </li> 
  <li>3
   <ul> 
    <li>6</li> 
    <li>7</li> 
   </ul> 
  </li> 
 </ul> 
</li>

Where -- is a empty space (to differ left/right child).

It displays as a classic unordered list. But that's hard to read and navigate through. I need a horizontal tree that looks like this:

http://www.knowledgerush.com/wiki%5Fimage/d/df/Binary%5Ftree.png

It can be with or without the lines between the nodes.

My question is - can this be done via html/css alone or do I need to use javascript for this?

Answer 1

Sounds like a great idea, but I see it very difficult to achieve.

• Lines vary in angle, so forget about doing it without some special logic (not achievable through HTML/CSS alone)
• Child nodes seem to occupy the same vertical space as other parent nodes (see for example nodes 5 and 7), while others don't (see nodes 4 and 5). That's also some special ordering.

Anyway, you try to set each LI to float left and have a width of 50%, so each new level will be narrower and narrower - haven't tried yet.

Also, you might find this plugin interesting, although it doesn't use ULs but DIVs and uses jQuery: http://www.ajaxupdates.com/jquery-binary-tree-plugin/

Answer 2

I did something very similar to this a while back, and examined the various options available. I wanted to be able to update the diagram in real time on an AJAX page, and ended up generating and modifying a SVG graphic with Javascript code. Firefox handled the resulting page extremely well and responsively, and I wasn't that worried that IE didn't cope with it at all.

Since then, we have had more developments with HTML5 and in particular the new canvas tag. This sounds to be ideal for this sort of thing, and might be worth an experiment.

Good luck!