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 CSS per la creazione ...

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