Unable to view tree as horizontal

Question

I want to create tree horizontally.

I got one link http://codepen.io/Pestov/pen/BLpgm but it's not horizontal. I tried to change css but unable to get expected view. could anyone please tell me how can i do it to view tree as horizontal. root start from left.

I want css for below image..and it should be dynamic. as if nodes deleted then it should adjust edges.

Answer 1

One way would be to just rotate .tree and then adjust top and left properties to position the tree as needed.

EDITED:

Add this to your css:

.tree {
    position: absolute;
    top: 50px;
    left: -50px;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
}

Add these to .tree li a:

.tree li a{
    margin: 45px 0;  // To accommodate space taken by each node
    transform: rotate(90deg); 
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    z-index: 10;
    background: white;
}

Add an id to one of the ul elements:

<a href="#">Parent</a>
<ul id="parent_root">

Then add this css:

#parent_root::before {
    height: 80px;
}

Finally, change the height here:

.tree ul ul::before{
    height: 100px; 
}

And the height here:

.tree li::before, .tree li::after{
    height: 60px;
}}

UPDATED CODEPEN: http://codepen.io/anon/pen/yOGNmE

Answer 2

JS Fiddle: https://jsfiddle.net/dsupreme/24vs99d3/

Add the following css:

.tree {
    position: absolute;
    top: 50px;   \\ Increase if elements are being cut from the top
    left: -50px; \\ Decrease if tree is shifted to much to the right
    transform: rotate(-90deg); \\ To rotate the whole tree anti clockwise
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
}

.tree li a{
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    display: inline-block;
    transform: rotate(90deg); \\ To rotate all the nodes clockwise
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);

    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

Add this js utility

$(document).ready(function() {
    $.each($("a"), function() {
        var currWidth = $(this).width();
        $(this).css("margin", (currWidth*0.5 ) + "px 0 " + (currWidth*0.5) + "px 0");
    });
});

Note:

This works for scenario where elements on the same name do not have same value because we measure the width of each node and then add margin to each <a> separately

Margin: Top Right Bottom Left We are giving top and bottom margin for aligning Left and Right because top and bottom when rotated by 90 degrees become properties for left and right