Chi ha due pollici e ama spingere i limiti del CSS? Questo ragazzo. Entriamo in un progetto che fa proprio questo. È piuttosto sperimentale e non passerà la polizia semantica, ma ti insegnerà un sacco di tattiche CSS avanzate e sarà molto divertente.
Quello che stiamo per costruire è un cursore a fisarmonica orizzontale CSS puro. Sarai in grado di inserire tutte le diapositive che vuoi, ciascuna con contenuti unici e ciascuna accessibile tramite un evento click, il tutto senza una mano di JavaScript. Impossibile dirlo? Mai!
Cosa stiamo costruendo
Il prodotto finale degli sforzi di oggi sarà un menu a fisarmonica orizzontale scorrevole, animato e cliccabile. Vogliamo alcune barre strette che, quando si fa clic, si espandono per mostrare il contenuto nascosto.
demo: Clicca qui per il lancio.
CSS cliccabile
Come ben sai, i CSS non supportano gli eventi di click, quindi come diamine faremo spostare questa cosa dalla diapositiva alla diapositiva? Potremmo prendere la via più semplice e usare un hover, ma dov'è il divertimento? Invece, proviamo qualcosa di un po 'più difficile e dirottiamo una serie di pulsanti radio.
Con i pulsanti di scelta, abbiamo tutto ciò di cui abbiamo bisogno: un gruppo di elementi cliccabili in cui solo uno può essere selezionato e che l'elemento selezionato è facile da indirizzare e stilare. Perfezionare! Semantico? Non proprio? Se vuoi farlo in un modo che verrà visualizzato sotto una revisione tra pari, usa JavaScript. Oggi stiamo semplicemente spingendo i CSS per quanto possiamo fare per vedere se possiamo imparare qualcosa lungo la strada.
Passo 1: Cornice HTML
Costruire un nuovo progetto di web design è come costruire una casa. Il primo passo è quello di ottenere una struttura semplice ma solida su cui è possibile costruire il resto. Per ottenere ciò, inseriremo alcuni HTML di base.
La prima cosa di cui abbiamo bisogno è una lista non ordinata all'interno di un elemento del modulo. Questo sembra un po 'strano a questo punto, ma avrà più senso in un minuto.
Qui ogni elemento della lista rappresenta una diapositiva. Se vuoi cinque diapositive, dovresti avere cinque voci di elenco. Il nostro progetto di test utilizzerà tre diapositive. Allora perché l'elemento forma? Attacchiamo quello dopo.
All'interno di ogni elemento della lista, inseriremo tre elementi: un input, un'etichetta e un div. Gli ingressi saranno pulsanti radio, che sono collegati alle etichette. Insieme, questi due elementi costituiranno i nostri controlli per fisarmonica. Il div terrà il contenuto che vogliamo all'interno di ogni diapositiva.
Come ho detto sopra, stiamo usando i pulsanti radio qui perché forniscono tutte le funzionalità di cui abbiamo bisogno per tirare fuori questa piccola prodezza. Il problema, naturalmente, è che assomigliano ai pulsanti radio. Possiamo sistemarlo con la magia dei CSS.
Passo 2: Sostituisci gli stili del modulo
La nostra prossima sfida è rendere graziosi i brutti pulsanti radio. Ecco come sarà il nostro HTML senza alcuno stile:
Come puoi vedere, tra la lista dei proiettili e i pulsanti radio, abbiamo il nostro lavoro che ci ha tagliato. Prima le cose però, prima di fare qualsiasi altra cosa, buttiamo fuori il reset di un pigro:
Ciò garantisce che i nostri margini e padding funzioneranno correttamente su vari browser e che qualsiasi padding non interferirà con le nostre dimensioni esplicitamente dichiarate. Border-box lo fa manipolando il modello di box CSS standard per essere un po 'più user-friendly.
Cancellare gli stili di elenco
Quindi, affrontiamo qualcosa di facile. Questi punti possono essere uccisi con un semplice blocco di stile che sono sicuro che tu abbia familiarità con.
Nascondi i pulsanti della radio
Ora è il momento di scegliere come target i pulsanti di opzione e cacciarli dallo schermo. Per fare ciò, imposteremo semplicemente la loro posizione in assoluto e quindi li posizioneremo lontano.
Nota che il mio selettore qui è super generico. Se stai posizionando questo oggetto in un progetto, assicurati di non indirizzare tutti gli input come ho fatto qui. Toss l'intera cosa in un div con una classe e target solo gli input associati a quella classe.
Stile l'etichetta
Ora il nostro pulsante radio è nascosto, ma perché diamine abbiamo deciso di farlo? Come controlleremo la fisarmonica? La risposta è ovviamente che l'etichetta di un pulsante di opzione funge da punto di scatto alternativo e può essere stilizzata in modo più libero. Ciò significa che anche con il pulsante di opzione disattivato, la nostra funzionalità sarà ancora presente nelle etichette, tutto ciò che dobbiamo fare è renderle presentabili.
Qui ho diviso il mio codice in tre parti in modo da poterlo attraversare facilmente. Il primo blocco governa il fattore di forma dell'etichetta: altezza, larghezza, margine, eccedenza, ecc. Abbiamo sostanzialmente trasformato le etichette in grandi rettangoli che si siederanno uno accanto all'altro.
Il prossimo è il blocco di stili che governa l'aspetto delle etichette. Abbiamo impostato lo sfondo in grigio, allineato al centro il testo (i piccoli numeri) e impostato la dimensione del carattere.
Infine, impostiamo alcune transizioni in modo che i cambiamenti che andremo a realizzare in seguito saranno animati.
Passaggio 3: Più stile di etichetta
Con quell'ultimo pezzo di stile, abbiamo completamente trasformato i noiosi vecchi pulsanti radio in qualcosa che sembra molto più vicino a quello che stiamo cercando di ottenere.
Non mi piace che non ci sia una definizione tra le tre schede, quindi aiutiamolo con un po 'più di stile.
Qui abbiamo oscurato la seconda scheda in modo da farla risaltare tra la prima e la terza scheda, aggiungere un'altra transizione e impostare gli stili di passaggio del mouse per scurire ulteriormente le schede quando l'utente esegue il mouse su di esse. Questo renderà le nostre schede molto migliori:
Passaggio 4: Diapositiva HTML
Ora che abbiamo le nostre schede nel modo in cui vogliamo, torniamo indietro e completiamo il nostro codice HTML. Questo contenuto sarebbe entrato nel modo in cui lo avessimo inserito prima, ma dovrebbe rimanere nascosto ora.