Benissimo, è sicuramente una base di partenzaringrazio tutti, ho ottenuto un risultato magari non perfetto, ma per le mie esigenze soddisfacente utilizzando quanto segue:
Se vuoi utilizzare qualcosa di un po' più elaborato, qui un esempio di ciò che sono riuscito a combinare usando appunto gli pseudo-elementi:
Il tutto è racchiuso in un contenitore (.folder-tree) così che sia possibile integrarlo facilmente dentro le proprie pagine HTML.codice:<!DOCTYPE HTML> <html lang="it"> <head> <title>Esempio</title> <meta charset="utf-8"> <style> .folder-tree { font: 14px sans-serif; /* Font */ color: #024; /* Colore testo */ background: #f5faff; /* Colore contenitre */ border: 1px solid #d3dcf1; /* Bordo contenitore */ display: inline-block; padding: 10px 40px; border-radius: 10px; } .folder-tree > ul ul li::before, .folder-tree > ul ul li::after { border: 1px dotted #83a6cc; /* Linee grafico */ content: ""; position: absolute; display: inline-block; } .folder-tree ul { list-style: none; padding-left: 10px; } .folder-tree > ul { padding-left: 0; } .folder-tree > ul ul li { position: relative; padding: 15px 0 0 calc(15px + .5em); line-height: .9em; } .folder-tree > ul ul li::before { top: 2px; left: 5px; bottom: -1px; border-top: 0; border-right: 0; border-bottom: 0; } .folder-tree > ul ul li::after { top: calc(15px + .5em); left: 6px; width: calc(4px + .5em); border-top: 0; border-right: 0; border-left: 0; } .folder-tree > ul ul li:last-child::before { bottom: calc(100% - 16px - .5em); } </style> </head> <body> <div class="folder-tree"> <ul> <li> ROOT <ul> <li> menu1 <ul> <li>menu 1.1<br>multiriga</li> <li>menu 1.2</li> </ul> </li> <li> menu2 <ul> <li>menu 2.1</li> <li>menu 2.2</li> </ul> </li> </ul> </li> </ul> </div> </body> </html>
Le regole commentate sono quelle principali per le quali è possibile personalizzare facilmente font e colori.
Buon proseguimento
Rispondi quotando
Originariamente inviata da KillerWorm
! Grazie ancora per l'aiuto!!
