Question

I’m looking to create on-the-fly tree diagrams using PHP, HTML, and CSS. Mock-up below:

The images need to be clickable links, and I’d prefer not to use an image map as that would be costly for on-the-fly generation.

I was thinking of using some creative <div> placement like so:

where dotted lines represent invisible borders and solid lines visible ones. The html would be pretty gnarly, but the code to generate it should be a few clean loops only.

Is there a better way?

Answer 1

The HTML structure you need to generate is a plain old nested list, e.g.:

<ul>
  <li>Group 1
    <ul>
      <li><a href="foo">Item 1</a></li>
      <li><a href="bar">Item 2</a></li>
    </ul>
  </li>
  <li>Group 2
    <ul>
      <li><a href="baz">Item A</a></li>
    </ul>
  </li>
</ul>

Dead simple and you don’t need to add any “gnarly” markup, or any markup at all. Use CSS to style each item accordingly. Here’s a tutorial. It’s a little older, though—these days every modern browser supports :last-child so you don’t need any JavaScript unless you’re concerned about those IE6/7/8 users.