css menu ad albero

[aquatimer2000]

Ciao a tutti,

ho un menu ad albero di questo tipo:

<ul>
    <li>root
        <ul>
            <li>menu1
                <ul>
                    <li>menu 1.1</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>

come posso fare per stampare i rami dell'albero, con bordi dot?

Ho provato ad utilizzare border-bottom e border-left sui tag <li> ma il risultato è davvero brutto.

li {
    border-left: 1px dotted;
    border-bottom: 1px dotted;
}

il resto della pagina html non ha css, devo solo stampare una list item simile a questa (con molte più voci) ed avere la possibilità di vedere le linee orizzontali e verticali dei rami.

Il menu deve essere sempre "esploso" non ho bisogno di aprire/chiudere i vari elementi..

[m4rko80]

Ciao, qui puoi trovare i selettori css vari , non ho capito se non vuoi avere il bordo esattamente sul <li> stesso ma diversamente su qualcosa nel suo contenuto stesso. Hai un esempio da mostrare che vorresti replicare?

[aquatimer2000]

indicativamente vorrei un risultato come questo:

menu tree.jpg

al posto dell'immagine della cartella dovrei metterci un'immagine con un cerchio di colore diverso (a seconda del risultato della query che stampa il menu ad albero)

per il bordo punteggiato in verticale ho risolto con:

li {
    border-left: 1px dotted;
    margin:15px;
}

a questo punto mi manca il bordo orizzontale fino (all'immagine) e l'inserimento dell'immagine. (ammesso che l'immagine sia da collocare nel css e non nel print dell'albero)

Grazie 1000 per l'aiuto!!

[m4rko80]

A questo punto forse ti conviene guardare una guida tipo questa visto che vuoi fare qualcosa di abbastanza dinamico. Puoi creare classi e gestire quindi immagini o colori direttamente da css

[aquatimer2000]

ok intanto do uno sguardo, io comunque non devo esplorare il menu, mi serve solo che venga stampato con tutti i sottomenu aperti.

[aquatimer2000]

praticamente mi ritrovo sempre allo stesso punto:

riesco a far bene le linee punteggiate che vanno dall'alto in basso (con border-left: 1px dotted; ) ma, quando faccio quelle orizzontali con border-bottom: 1px dotted; il bordo punteggiato prosegue per tutta la larghezza della pagina, mentre si dovrebbe fermare quando inizia il testo del menu

oppure queste linee punteggiate sono fatte con immagini che vengono ripetute in altezza e in larghezza ?!?!

[m4rko80]

Il fatto è che tu vuoi una riga tratteggiata semplicemente decoarativa prima della label/descrizione di ogni voce. Quello che stai impostando tu ora invece è il bordo del <li> che lo contiene, quindi non sarà mai in linea col testo e di lunghezza probabilmente variabili in base al testo (o 100%) se non gestito il contenitore. Quindi potresti tenere solo il bordo laterale e volendo aggiungere banalmente dei puntini come fossero testo priama delle label, oppure inserirli appunto tramite css https://www.w3schools.com/cssref/sel_before.asp

[aquatimer2000]

bene, provo e ti aggiorno!

[KillerWorm]

Ciao, giusto una dritta al volo, col CSS puoi usare gli pseudo-elementi ::before e ::after; dimensionati, posizionati e impostati a dovere possono creare l'effetto che ti serve.

[aquatimer2000]

ringrazio tutti, ho ottenuto un risultato magari non perfetto, ma per le mie esigenze soddisfacente utilizzando quanto segue:

ul {
    list-style-type: none;
    list-style: inside; 
}


li {
    list-style-type: none;
    border-left: 1px dotted;
    margin:15px;
}


li::before {
    content: "....... ";
}

grazie a tutti per l'aiuto!