Pagina 2 di 2 primaprima 1 2
Visualizzazione dei risultati da 11 a 12 su 12

Discussione: css menu ad albero

  1. #11
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,602
    ringrazio tutti, ho ottenuto un risultato magari non perfetto, ma per le mie esigenze soddisfacente utilizzando quanto segue:
    Benissimo, è sicuramente una base di partenza

    Se vuoi utilizzare qualcosa di un po' più elaborato, qui un esempio di ciò che sono riuscito a combinare usando appunto gli pseudo-elementi:
    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>
    Il tutto è racchiuso in un contenitore (.folder-tree) così che sia possibile integrarlo facilmente dentro le proprie pagine HTML.
    Le regole commentate sono quelle principali per le quali è possibile personalizzare facilmente font e colori.

    Buon proseguimento
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  2. #12
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Benissimo, è sicuramente una base di partenza

    Se vuoi utilizzare qualcosa di un po' più elaborato, qui un esempio di ciò che sono riuscito a combinare usando appunto gli pseudo-elementi:
    èh cacchio !! sto utlizzando il tuo .. e nel frattempo mi "studio" come lo hai scritto .... ovviamente è tutta un'altra roba rispetto a quello che avevo scritto io ! Grazie ancora per l'aiuto!!
    aquatimer2000

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.