4 modi per creare stupefacenti fisarmoniche CSS
Le fisarmoniche di contenuto costituiscono un utile modello di progettazione. Puoi usarli per molte cose diverse: per menu, elenchi, immagini, estratti di articoli, snippet di testo e persino video
La maggior parte delle fisarmoniche fa affidamento su di esse JavaScript, principalmente su jQuery, ma dal momento che l'uso di tecniche avanzate CSS3 è diventato diffuso, possiamo anche trovare dei buoni esempi usa solo HTML e CSS, che li rendono accessibili in ambienti con JavaScript disabilitato.
Creare fisarmoniche solo CSS può essere un compito difficile, quindi in questo post ci proveremo capire i concetti principali che gli sviluppatori usano quando devono crearne uno.
Nella creazione di schede solo CSS ci sono solitamente due approcci principali, ognuno dei quali ha due casi di utilizzo frequente. Il primo approccio utilizza elementi di forma nascosti, mentre il secondo fa uso di Pseudo-selettori CSS.
1. Il metodo del pulsante radio
Il Metodo pulsante radio aggiunge un ingresso radio nascosto e un tag etichetta corrispondente a ciascuna scheda della fisarmonica. La logica è semplice: quando l'utente seleziona una scheda, in pratica controllano il pulsante di opzione che appartiene a quella scheda, allo stesso modo quando compilano un modulo. Quando fanno clic sulla scheda successiva nella fisarmonica, selezionano il pulsante di opzione successivo, ecc.
In questo metodo, solo una scheda può essere aperta allo stesso tempo. La logica dell'HTML è qualcosa del genere:
Titolo del contenuto (non usare il tag h1 qui)
Alcuni contenuti ...
p>
Devi aggiungere una coppia di etichette radio separate per ogni scheda nella fisarmonica. L'HTML da solo non darà il comportamento desiderato, è necessario aggiungere anche le regole CSS appropriate, vediamo come è possibile ottenerlo.
Fixed Vertical Height Tabs
In questa soluzione (vedere lo screenshot in basso), lo sviluppatore ha nascosto il pulsante di opzione con l'aiuto di display: nessuno; regola, quindi ha dato una posizione relativa al tag etichetta che contiene il titolo di ogni scheda e una posizione assoluta al corrispondente etichetta: dopo pseudo-elemento.
Quest'ultimo contiene la maniglia contrassegnata da un segno + verde che apre le schede. Le schede chiuse utilizzano anche una maniglia contrassegnata con il verde “-” segni. Nel CSS le schede chiuse sono selezionate con l'aiuto dell'elemento + selettore di elementi.
È inoltre necessario dare il contenuto della scheda aperta a un'altezza fissa. Per fare ciò seleziona il corpo della scheda aperta (contrassegnato con la classe di contenuto della scheda nel codice HTML sopra) con l'aiuto del selettore CSS element1 ~ element2.
La logica di base del CSS qui è la seguente:
input [type = radio] display: none; label position: relative; blocco di visualizzazione; label: after content: "+"; posizione: assoluta; a destra: 1em; input: checked + label: after content: "-"; input: controllato ~ .tab-content height: 150px;
Puoi dare un'occhiata al CSS completo qui su Codepen. Il CSS è stato originariamente scritto in Sass, ma se si fa clic su “Visualizza compilato” pulsante, puoi vedere il file CSS compilato.
Fisarmonica d'immagine con pulsanti radio
Questa bellissima fisarmonica ad immagine utilizza lo stesso metodo di pulsante radio, ma al posto delle etichette, lo sviluppatore qui usato il tag HTML di figcaption per realizzare il comportamento della fisarmonica.
Il CSS è un po 'diverso, principalmente perché in questo caso le schede non sono posizionate verticalmente ma orizzontalmente. Lo sviluppatore ha utilizzato il selettore elemento + elemento CSS (utilizzato nel caso precedente per selezionare i pulsanti) per garantire che i bordi delle immagini coperte rimangano visibili.
Leggi la guida dettagliata su come creare questa elegante fisarmonica solo per CSS.
2. Il metodo Checkbox
Il metodo checkbox utilizza il tipo di input della casella di controllo anziché il pulsante di opzione. Quando l'utente seleziona una scheda, in pratica controllano la casella di controllo corrispondente.
La differenza rispetto al metodo del pulsante radio è che è possibile aprire più di una scheda contemporaneamente, proprio come è possibile controllare più di una casella di controllo all'interno di un modulo.
D'altra parte, le schede non si chiuderanno da sole quando l'utente fa clic su un altro. La logica dell'HTML è la stessa di prima, solo in questo caso è necessario utilizzare la casella di controllo per il tipo di input.
Titolo del contenuto (non usare il tag h1 qui)
Alcuni contenuti ...
p>
Altezza fissa casella di controllo
Se vuoi schede di contenuto ad altezza fissa, la logica del CSS è praticamente la stessa del caso del pulsante radio, è solo il tipo di input che è cambiato da radio a checkbox. In questa penna Codepen puoi dare un'occhiata al codice.
Fisarmonica Cassa Altezza Fluida
Quando più di una scheda sono aperte contemporaneamente, la visualizzazione di schede ad altezza fissa può influire negativamente sull'esperienza dell'utente in quanto l'altezza della fisarmonica può aumentare in modo significativo. Questo può essere migliorato se tu cambiare l'altezza fissa in altezza del fluido; ciò significa che l'altezza delle schede aperte si espande o si restringe in base alle dimensioni del contenuto in esse contenuto.
Per farlo è necessario modificare l'altezza fissa del contenuto della scheda a un'altezza massima, e utilizzare unità relative:
input: controllato ~ .tab-content max-height: 50em;
Se vuoi capire meglio come funziona questo metodo, puoi dare un'occhiata a questo Codepen.
3. Il: metodo di destinazione
: target è uno dei pseudo-selettori di CSS3. Con il suo aiuto puoi collegare un elemento HTML a un tag di ancoraggio nel seguente modo:
Titolo della scheda
Contenuto della scheda
Quando l'utente fa clic sul titolo di una scheda, l'intera sezione si aprirà grazie a :bersaglio pseudo-selettore e l'URL verrà modificato anche nel seguente formato: www.some-url.com/#tab-1.
La scheda aperta può essere disegnata in CSS con l'aiuto di sezione: target ... regola. Abbiamo un ottimo tutorial qui su hongkiat su come è possibile creare belle fisarmoniche CSS-only con il :bersaglio metodo in entrambi i layout verticali e orizzontali.
La principale mancanza del :bersaglio il metodo è quello cambia l'URL quando l'utente fa clic sulle schede. Ciò influisce sulla cronologia del browser e il pulsante Indietro del browser non porta l'utente alla pagina precedente, ma allo stato precedente della fisarmonica.
4. Il metodo: hover
Quest'ultima mancanza può essere superata se utilizziamo il : hover Pseudo-selettore CSS invece di :bersaglio, ma in questo caso le schede non reagiscono al clic ma all'evento hover. Il trucco qui è che è necessario o nascondi gli elementi scoperti, o riduci la loro larghezza o altezza - a seconda del layout delle schede
L'elemento stazionario deve essere reso visibile o impostato su larghezza / altezza per far funzionare la fisarmonica.
Le seguenti 3 fisarmoniche solo CSS sono state realizzate con il metodo: hover, fai clic sui link sotto gli screenshot per dare un'occhiata al codice.
Fisarmonica dell'immagine orizzontale
Fisarmonica distorta
Fisarmonica attivata da Hover con stato predefinito
