a questo punto dovresti postare la soluzione trovata, in modo da condividerla.
a questo punto dovresti postare la soluzione trovata, in modo da condividerla.
Ecco qua.Originariamente inviata da Vincent.Zeno
a questo punto dovresti postare la soluzione trovata, in modo da condividerla.
Metto il codice originale che ho trovato, io, pur non sapendo un'acca di HTML, a intuito e tentativi l'ho migliorato decisamente dal punto di vista estetico, ma uno che dovesse usarlo è meglio parta dall'originale
.
In realtà anche questo codice ha la sua (piccola) magagna, ogni nuovo testo che introduco devo anche incrementare e aggiornare la stringa id="cbn", l'ideale sarebbe semplicemente inserire i testi e basta.
codice:<head><style> ul { list-style-type: none; } label{ background-color: #AAAFAB; border-radius: 5px; padding: 3px; padding-left: 25px; color: white; } li { margin: 10px; padding: 5px; border: 1px solid #ABC; border-radius: 5px; } input[type=checkbox] { display: none; } input[type=checkbox] ~ ul { max-height: 0; max-width: 0; opacity: 0; overflow: hidden; white-space:nowrap; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease; } input[type=checkbox]:checked ~ ul { max-height: 100%; max-width: 100%; opacity: 1; } input[type=checkbox] + label:before{ transform-origin:25% 50%; border: 8px solid transparent; border-width: 8px 12px; border-left-color: white; margin-left: -20px; width: 0; height: 0; display: inline-block; text-align: center; content: ''; color: #AAAFAB; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease; position: absolute; margin-top: 1px; } input[type=checkbox]:checked + label:before { transform: rotate(90deg); /*margin-top: 6px; margin-left: -25px;*/ } </style> </head> <ul> <li><input type="checkbox" id="cb1"/><label for="cb1">Level 1</label> <ul> <li><input type="checkbox" id="cb2"/><label for="cb2">Level 2-A</label> <ul> <li><label>Level 3-A</label> Content</li> <li><label>Level 3-B</label> Content</li> </ul> </li> <li><input type="checkbox" id="cb3"/><label for="cb3">Level 2-B</label> <ul> <li><input type="checkbox" id="cb5"/><label for="cb5">Level 3-A</label> <ul> <li><label>Level 4-A</label> Content</li> <li><label>Level 4-B</label> Content</li> <li><label>Level 4-C</label> Content</li> <li><label>Level 4-D</label> Content</li> </ul> </li> <li><input type="checkbox" id="cb6"/><label for="cb6">Level 3-B</label> <ul> <li><label>Level 4-A</label> Content</li> <li><label>Level 4-B</label> Content</li> </ul> </li> <li><input type="checkbox" id="cb7"/><label for="cb7">Level 3-C</label> <ul> <li><label>Level 4-A</label> Content</li> <li><label>Level 4-B</label> Content</li> <li><label>Level 4-C</label> Content</li> </ul> </li> </ul> </li> <li><input type="checkbox" id="cb4"/><label for="cb4">Level 2-C</label> <ul> <li><label>Level 3-A</label> Content</li> </ul> </li> </ul> </li> </ul>
Ahi ahi, ho scoperto un difetto non da poco del codice senza java script, NON FA LO SCROLL VERTICALE AUTOMATICO quando si apre l'ultimo livello.
Così quando arrivo a fondo pagina sono obbligato a scrollare manualmente per creare lo spazio per leggere il testo, quindi scrolla-apri risposta, scrolla-apri risposta, scrolla- apri ... così non va.
Googlando ho ricavato il terribile sospetto che lo scroll automatico si può fare solo con java script, confermate????????????
Permessi di invio
Rispondi quotando
