Albero verticale con CSS e HTML

Question

Sto cercando di disegnare una struttura ad albero verticale con HTML e CSS. L'ho fatto in una certa misura.

Fiddle

<!-- 
We will create a family tree using just CSS(3) 
The markup will be simple nested lists 
--> 
<div class="tree"> 
    <ul> 
     <li> 
      <a href="#">Parent</a> 
      <ul> 
       <li><a href="#">Child</a> 
        <ul> 
         <li><a href="#">Grand Child</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">Child</a> 
        <ul> 
         <li><a href="#">Grand Child</a></li> 
         <li><a href="#">Grand Child</a> 
          <ul> 
           <li><a href="#">Great Grand Child</a></li> 
           <li><a href="#">Great Grand Child</a></li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Nel mio caso, un nodo può avere un massimo di 2 bambini, non di più. Ho funzionato per il primo nodo figlio. In caso di second child, non sto ottenendo la linea verticale al 100% (fino al suo nodo genitore).

Ho provato a fare alcune modifiche ma nessuna ha funzionato. Cosa potrei cambiare nel mio CSS, in modo che tutti i nodi siano connessi e assomigli ad un albero?

È possibile fare con il CSS stesso? o è possibile aggiungendo qualche javascript?

Answer 1

Se si dispone di un insieme limitato di possibilità e non alla ricerca di qualcosa di molto dinamico, una cosa che si possa fare è aggiungere classi con diversi top e height per il vostro :after pseudo element e applicare classi nel tuo html per voi li elementi a seconda di ciò che ogni bisogno. Qualcosa del genere, per esempio:

.tree li::after{ 
    content: ''; 
    position: absolute; top: 0; 

    width: 3%; height: 50px; 
    right: auto; left: -2.5%; 

    border-bottom: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
    border-radius: 0 0 0 5px; 
    -webkit-border-radius: 0 0 0 5px; 
    -moz-border-radius: 0 0 0 5px; 
} 
.tree li.two-step::after{ 
    top: -100px; 
    height: 150px; 
} 

.tree li.three-step::after{ 
    top: -180px; 
    height: 230px; 
} 

https://jsfiddle.net/g2ue3wL5/1/

EDIT:

Handling :after pseudo-elements non è dinamicamente così facile (almeno non per me ...). Non c'è davvero un modo per gestirli direttamente, devi passare attraverso il loro elemento reale, e anche allora devi lavorare con CSS. Quindi una soluzione dinamica con non sarebbe l'approccio migliore che io penso.

Ma è possibile sostituirli con span e lavorare con jQuery. Questo ti dà una soluzione relativamente piccola e facile. In primo luogo, aggiungere un arco ad ogni elemento:

<li><a href="#">Child</a> <span></span>  
<li><a href="#">Grand Child</a><span></span> 

Poi, nel CSS sostituzione: dopo con la> vita:

.tree li > span { 
    content:''; 
    position: absolute; 
    top: 0; 
    width: 3%; 
    height: 50px; 
    right: auto; 
    left: -2.5%; 
    border-bottom: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
    border-radius: 0 0 0 5px; 
    -webkit-border-radius: 0 0 0 5px; 
    -moz-border-radius: 0 0 0 5px; 
} 

E si passa attraverso ciascuno di questi span e fare alcuni calcoli per impostare height e top a seconda del parent:

$('.tree li > span').each(function() { 
    var thisNewTop = $(this).closest('ul').offset().top - $(this).offset().top; 
    var thisNewHeight = $(this).offset().top - $(this).closest('ul').offset().top + 50; 

    $(this).css({ 
     top: thisNewTop, 
     height: thisNewHeight 
    }); 
}); 

https://jsfiddle.net/g2ue3wL5/3/

La soluzione equivalente in chiaro javascript sarebbe molto più lunga, penso che sia il tipo di situazione in cui jQuery può risparmiare molto tempo.