Sono stati pubblicati molti articoli in cui è stato ottenuto un qualche tipo di effetto passando il puntatore del mouse su un elemento. Questa operazione è relativamente semplice da realizzare perché richiede solo l'applicazione di uno stile CSS per lo stato normale dell'elemento e di uno diverso per lo stesso elemento nello stato :hover .
Tuttavia, da quando i dispositivi touch sono entrati a far parte delle nostre vite e, soprattutto, da quando si sono guadagnati un posto importante su Internet, :hover a volte risulta insufficiente, poiché questi tipi di gadget generalmente rispondono all'azione di posizionare il dito su qualcosa solo come sinonimo di clic, rendendo praticamente inutile attaccare il selettore con :hover .
Ecco perché oggi esamineremo un modo, basato solo su CSS, per mostrare qualcosa di nascosto con un clic. Lo faremo utilizzando un pulsante di opzione ( input ) come elemento ausiliario e sfruttando il suo possibile stato :checked (selezionato) per il secondo set di proprietà.
Alla fine dell'articolo, potete vedere un menu a tendina con link ai social media come esempio di come utilizzarlo.
Per fare questo abbiamo bisogno di un pulsante di opzione e della sua etichetta corrispondente. L'idea generale è di nascondere l' input che lo forma in modo che non disturbi esteticamente e lasciare solo la sua etichetta ( label ) come pulsante di attivazione, poiché entrambi reagiscono allo stesso modo al clic nel loro insieme e con l'etichetta è più facile creare un formato personalizzato con CSS.
Qui puoi vedere il codice base per nascondere/mostrare con una casella di controllo : È importante che l' input e la sua etichetta corrispondente abbiano lo stesso nome ( activate nell'esempio), tra le altre cose perché entrambi gli elementi possono essere separati senza problemi intervallati da qualsiasi altro codice e questa è la chiave che ci permette di relazionarli l'uno con l'altro. Oltre a questi due, l'unica cosa di cui abbiamo bisogno è un box con il contenuto che intendiamo attivare con il pulsante. Nel CSS quello che abbiamo fatto è usare il selettore corrispondente al pulsante ( #activate ) e indicare che il suo fratello (~), che è il box con il contenuto ( .dropdown ), è inizialmente nascosto. Quindi utilizziamo lo stato :checked in modo che, quando si clicca sull'input , la casella e il suo contenuto diventino visibili. Questo sarebbe il risultato. (Nota che non importa se si clicca sul pulsante o sulla sua etichetta "Clicca per visualizzare il contenuto").
<input id="activar" name="activar" type="checkbox">
<label class="inputlabel" for="activar">Clic para ver contenido</label>
<div class="desplegable">
Aquí podría ir cualquier tipo de elemento
</div>
#activar ~ .desplegable {display: none;overflow: hidden;}
#activar:checked ~ .desplegable {display: block;}
Clicca per visualizzare il contenuto
Ora giochiamo un po' con lo stile per renderlo ancora più gradevole.
Useremo lo stesso codice HTML, ma senza didascalie all'interno del tag <head> . Vedrete le nuove regole CSS più avanti, in questo ordine...
- Nascondi la casella di controllo in modo che sia visibile solo la sua etichetta
- Hanno modificato l'aspetto dell'etichetta per farla sembrare più un pulsante.
- Aggiungere un testo ("Apri") all'etichetta nello stato normale della casella di controllo
- Nascondono il contenuto nascosto e gli danno un po' di forma e colore.
- Mostra contenuto nascosto quando la casella di controllo è attivata
- Aggiungi un testo diverso ("Chiudi") all'etichetta quando la casella di controllo è attivata
#activar {display: none;}
.inputlabel {display: inline-block;height: 20px;line-height: 20px;padding: 5px 10px;background: #000;color: #fff;}
#activar ~ .inputlabel:before {content: "ABRIR"}
#activar ~ .desplegable {display: none;overflow: hidden;padding: 10px 20px; background: #000;color: #fff;}
#activar:checked ~ .desplegable {display: block;}
#activar:checked ~ .inputlabel:before {content: "CERRAR"}
E con tutto ciò otteniamo:
Comunque, questo è il trucco, e a seconda dell'aspetto che si dà al tutto, di dove lo si posiziona e del tipo di contenuto che si nasconde, il risultato sarà proprio questo. Quello qui sotto è pensato per collegare i social network stessi, ma può essere facilmente adattato con poco sforzo a qualsiasi altro tipo di menu.
L'ho incorporato da Codepen, quindi, come in altre occasioni, potete sperimentarlo e sperimentare.
Commenti
Posta un commento