How to Connect a Child Item in a Tree-Structure Visualization with CSS

How to connect a child item in a tree-structure visualization with CSS

I would do it differently like below:

.main {
  overflow: hidden;
}
ul {
  list-style: none;
  padding: 0;
  margin-left: 30px;
  margin-top: 10px;
}
.item {
  position: relative;
  line-height: 1.2em;
}
.item::before,
.item::after,
.item:last-child .sub-menu::before{
  content: '';
  background: #000;
  position: absolute;

}
.item::before {
  width: 10px;
  height: 1px;
  top: 0.5em;
  left: -10px;
}

.item::after {
  left: 20px;
  bottom: 0.6em;
  top: 1.2em;
  width: 1px;
}
/* the bekow will avoid the line to go down if there is no sub task (not transparent!)*/
.item:last-child > .sub-menu::before {
  top: calc(0.6em - 1px);
  width: 6px;
  bottom: 0;
  background: #fff;
  left: -12px;
  z-index: 1;
}

<ul class="main">
  <li class="item">Task 1</li>

  <li class="item">Task 2
    <ul class="sub-menu">
      <li class="item">Sub Task 1</li>

      <li class="item">Sub Task 2
        <ul class="sub-menu">
          <li class="item">Sub Task 1</li>
          <li class="item">Sub Task 2</li>
        </ul>
      </li>

      <li class="item">Sub Task 3
        <ul class="sub-menu">
          <li class="item">Sub Task 1</li>
          <li class="item">Sub Task 2
            <ul class="sub-menu">
              <li class="item">Sub Task 1</li>
              <li class="item">Sub Task 2</li>
            </ul>
          </li>
          <li class="item">Sub Task 3</li>
          <li class="item">Sub Task 4</li>
        </ul>
      </li>
    </ul>
  </li>

  <li class="item">Task 3</li>
</ul>

CSS HTML Sub List Items lines connected to parent

You can use pseudo elements to achieve this structure.

I have wrapped each child with <span> tag and used ::before element on that.

ul {
  list-style: none;
}

ul.sub-menu {
  position: relative;
  padding: 0;
  margin-left: 30px;
  margin-top: 10px;
}

li.item span {
  position: relative;
}

ul.sub-menu li.item span::before {
  content: '';
  height: 100%;
  width: 10px;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  position: absolute;
  bottom: 10px;
  left: -10px;
  z-index: -1;
}

<ul class="main">
  <li class="items">Task 1</li>
  
  <li class="items">Task 2
    <ul class="sub-menu">
      <li class="item"><span>Sub Task 1</span></li>
      
      <li class="item"><span>Sub Task 2</span>
        <ul class="sub-menu">
          <li class="item"><span>Sub Task 1</span></li>
          <li class="item"><span>Sub Task 2</span></li>
        </ul>
      </li>
      
    </ul>
  </li>
  
  <li class="items">Task 3</li>
</ul>

Displaying data in a tree model in HTML/CSS/JQuery

Html itself is a representation of a tree structure. Each element is a node and elements inside a node are children well the node itself is a parent.

If displaying data is all that is needed you could do it like:

<div> <-- Parent
     <p>Data Node Parent</p> <-- Data
     <div> <-- Child
         <p>Data Node Child</p> <-- Child Data
     </div>
</div>

Then use some css to style it like a like a tree.

Using jquery you can traverse the dom (tree) and add the data to each of these elements and or create the elements dynamically based on the data. You would be using methods like .next() .prev() .parent() .child()

http://api.jquery.com/category/traversing/

http://api.jquery.com/category/manipulation/

What's the best way to show (un/ordered) HTML lists as a top-down tree?

I'm pretty sure this is what you're looking for:

http://thejit.org/demos/

Try the SpaceTree in the middle, right. Note the custom style animations available, and the possibility to rearrange on demand the graph. Overall, that is a really cool project. :)

To use it with your list, you would need to hide the list and then create a native JS object (note, it's not a JSON object regardless of what the variable is called in the code behind) and populate it as you iterate over the UL and children. But it's very doable.

How do I draw the lines of a family tree using HTML CSS?

Another option for a graphical interface would be the canvas element. You can find some info on it here, here, and some demos of what it can do here.

Personally, I would choose Canvas with an image map overlay or possibly Flash. Creating a graphical layout using only divs or tables could get out of hand very quickly and create huge and ugly code. Although that's a matter of opinion. :)

You could use canvas to render the lines, and then absolutely position divs with text for each node. Or you could render the whole thing in canvas (at which point you would need an image map overlay if you want the rendered tree to be interactive.)

---

Related Topics