Tramite alcuni parametri CSS andremo a istruire il nostro pulsante Toggle al fine di ottenere informazioni in una finestra posta al centro dello schermo.
Il nostro foglio di style css:
label {
cursor: pointer;
}
#menu-toggle {
display: none;
}
#menu {
display: none;
}
#menu-toggle:checked + #menu {
display: block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 100px;
z-index: 999 !important;
background-color:white
}
E il nostro contenitore div con all'interno un pulsante e il testo da visualizzare al click:
<label for="menu-toggle" class="btn btn-outline-orange">Cliccami!!</label>
<input type="checkbox" id="menu-toggle"/>
<div id="menu">
<img src="https://serreri.com/assets/img/qrCode_sito.png" >
<label for="menu-toggle" class="btn btn-outline-orange">Chiudi!</label>
</div>
Il funzionamento è molto semplice, una volta impostato un contenitore div con id="menu" con all'interno le informazioni da mostrare, basta cliccare sul pulsante rappresentato dal tag <label> che tramite checked + #menu aprirà il nostro contenitore div.
Per chiudere nuovamente la finestra id="menu" sarà sufficiente cliccare nuovamente sul pulsante <label>.
Possiamo dire che il Toogle è un interruttore ON OFF.
Lascia un commento