Creare menu a discesa CSS con il checkbox
Titolo: | Creare menu a discesa CSS con il checkbox |
Sezione: | WEB |
Data: | 03.10.2018 |
In questo articolo, daremo un’occhiata ad una tecnica solo ...
In questo articolo, daremo un’occhiata ad una tecnica solo CSS per la creazione di menu a discesa, attraverso l’utilizzo dell’elemento checkbox senza utilizzare una singola riga di JavaScript.
<div class=”dropdown”>
<input type=”checkbox” id=”checkbox_toggle”>
<label for=”checkbox_toggle”>Click per aprire</label>
<ul>
<li><a href=”#”>Link Uno</a></li>
<li><a href=”#”>Link Due</a></li>
<li><a href=”#”>Link Tre</a></li>
<li><a href=”#”>Link quattro</a></li>
</ul>
</div>
Questo è come appare la struttura HTML. Qui è importante notare che l’elemento di input deve venire prima dell’etichetta e prima dell’ul.
Il checkbox Hack
Per prima cosa nascondiamo la casella di controllo e anche l’UL:
input[type=checkbox]{ display: none; } ul{ display: none; }
Se combiniamo il selettore: checked con il selettore generale siblings (~) possiamo modificare le proprietà CSS degli elementi che seguono la casella di controllo. Questo è il motivo per cui avevamo bisogno che la casella di controllo venisse prima, prima che l’ul nell’albero DOM.
input[type=checkbox]:checked ~ ul { display: block }
Kenji Agency : creazione siti web a Treviso