Le fisarmoniche CSS sono ampiamente utilizzate per menu espandibili e comprimibili, frammenti, immagini, video, domande frequenti, elenchi ed estratti di articoli. Puoi facilmente crearli utilizzando HTML, CSS e JavaScript (o jQuery). Creare fisarmoniche solo CSS è un compito un po' impegnativo, ma è super utile negli ambienti con JavaScript disabilitato.

In questa guida imparerai un approccio passo passo alla creazione di una fisarmonica solo CSS.

Costruire una fisarmonica di base usando solo HTML

Se la tua priorità è creare una fisarmonica accessibile utilizzando HTML, il e i tag sono la strada da percorrere. Non importa quale linguaggio di programmazione stai utilizzando, la fisarmonica solo HTML rimarrà intatta. Creare un tagga come genitore e inserisci la domanda in a etichetta. Scrivi una risposta descrittiva all'interno di a etichetta. Iterare il processo per qualsiasi numero di domande frequenti.

FAQ 1



Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione adipisci illum error, hic expedita numquam impedit explicabo vitae iure quae vero autem quia quibusdam tempora atque harum perferendis praesentium dolor!





instagram viewer







FAQ 2



Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt suscipit repudiandae cupiditate in accusantium recusandae tempora sint eligendi, perferendis aspernatur architecto voluptas laborum adipisci neque voluptates conseguenza. 






FAQ 3



Tenetur, ex delectus, perferendis aperiam voluptatem consequuntur molestiae ratione rerum vitae ab modi, minus placeat quis dignissimos. Dolorem quaerat odit, iusto laboriosam possimus, in architecto aliquam commodi sapiente saepe sequi at eligendi hic reprehenderit repellendus quos!

Disegnare la fisarmonica

Puoi modellare la fisarmonica regolando il colore di sfondo, raggio di confine, margine, imbottitura, eccetera.

corpo {
 font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Ginevra, Verdana, sans-serif;
 larghezza massima: 30 rem;
 margine: 1.5rem automatico;
}
riepilogo {
 peso del carattere: 600;
 colore: rgb (255, 255, 255);
 colore di sfondo: rgb (7, 185, 255);
 imbottitura: 1.2rem;
 margine inferiore: 1.2rem;
 raggio di confine: 0,5 rem;
 cursore: puntatore;
}

Produzione:

L'unica limitazione è che non avrai il controllo su ogni parte del codice. La struttura HTML può essere modificata, ma non è possibile creare una fisarmonica personalizzata. Pertanto, costruiamo una sezione FAQ personalizzata utilizzando CSS avanzati.

Crea la tua sezione FAQ personalizzata

Esistono due metodi popolari per creare una fisarmonica personalizzata solo con CSS. Puoi utilizzare caselle di controllo o pulsanti di opzione; spiegheremo entrambi i metodi.

Utilizzo del metodo della casella di controllo

Il metodo Checkbox utilizza casella di controllo come tipo di ingresso. Ogni volta che un utente seleziona una scheda, contrassegna la casella di controllo e si apre. È possibile aprire più schede contemporaneamente utilizzando il metodo Casella di controllo, simile a come è possibile contrassegnare più di una casella di controllo all'interno di una casella di controllo modulo HTML.

HTML

Fisarmonica personalizzata solo CSS (FAQ)

Utilizzo del metodo Casella di controllo






Come costruire una fisarmonica personalizzata usando solo CSS?


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum debitis voluptas aliquid tenetur quas suscipit
 assumenda a, nesciunt eum nobis eaque, exercitationem distintiio alias ullam quia. Corrupti beatae
 necessitatibus nihil.









Come modificare l'altezza degli pseudo-elementi?


 Temporibus vel dolore nam dolorem similique voluptatum. Aliquam, dolor et! Tempore mollitia voluptatibus
 ducimus accepturi doloribus aliquam ipsum vel, accusantium quo nemo expedita esse eos libero incidunt
 reprehenderit facere ex hic ipsa odit in! Evento.

CSS generale

Applicare il CSS di base al corpo.

corpo {
 colore: #502c2c;
 sfondo: #f1edec;
 imbottitura: 1.2rem;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 larghezza massima: 45 rem;
 margine: 0 automatico;
 dimensione del carattere: 1.2rem;
}

Disegnare la fisarmonica

Innanzitutto, nascondi le caselle di controllo modificando l'input.

/* Nasconde le caselle di controllo o il pulsante di opzione*/
ingresso {
 posizione: assoluta;
 opacità: 0;
 indice z: -1;
}

Ora, modella la fisarmonica. Puoi aggiungere un::dopo pseudo-elemento per il + cartello. Puoi fare riferimento a a Tabella di riferimento delle entità di carattere e usa qualsiasi Calcolatore di conversione di entità per trovare il valore CSS di un valore numerico. Qui, il valore CSS di + è \002B.

/* Stili a fisarmonica */
.FAQ {
 colore: #ffe3e3;
 margine inferiore: 3rem;
}
.faq-label {
 dimensione del carattere: 1,5 rem;
 display: flessibile;
 allinea-oggetti: centro;
 giustificare-contenuto: spazio-tra;
 imbottitura: 1em;
 sfondo: #b61818;
 font-weight: grassetto;
 cursore: puntatore;
 selezione utente: nessuno;
}
.faq-label:: dopo {
 contenuto: '\002B';
 imbottitura: 0,51 rem;
 trasforma: scala (1.8);
 allineamento del testo: centro;
 transizione: tutti 0,35 secondi;
}
.faq-content {
 altezza massima: 0;
 imbottitura: 0 1em;
 colore: #2c3e50;
 fondo: bianco;
 transizione: tutti 0,35 secondi;
 display: nessuno;
}

Ora aggiungiamo funzionalità alla fisarmonica usando selettori adiacenti e attributi. Qui, \2013 è il valore CSS per –, il valore numerico che rappresenta –.

input: controllato + .faq-label {
 sfondo: #8f1414;
}
input: controllato + .faq-label:: dopo {
 contenuto: '\2013';
 trasforma: scala (1.5);
}
input: verificato ~ .faq-content {
 altezza massima: 100vh;
 imbottitura: 1em;
 blocco di visualizzazione;
 transizione: tutti 0,35 secondi;
}

Produzione:

Utilizzo del metodo del pulsante di opzione

Il metodo del pulsante di opzione ha un tipo di ingresso impostato su Radio. Ogni volta che l'utente fa clic su una scheda, si apre il pulsante di opzione nascosto corrispondente a quella scheda. Quando fai clic sulla scheda successiva, la scheda precedente si chiude istantaneamente. Puoi aprire solo una scheda alla volta utilizzando il metodo del pulsante di opzione.

HTML

Fisarmonica personalizzata solo CSS (FAQ)

Utilizzo del metodo del pulsante di opzione






Come creare una fisarmonica usando il metodo del pulsante radio?


 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus maiores quisquam atque dicta eum numquam necessitatibus, nisi non adipisci temporibus corruzione libero hic aspernatur quibusdam dolores perferendis, officiis odio repellendus.









Come creare una fisarmonica personalizzata usando solo CSS?


 Aperiam dolores autem odit, nihil eius sit minima quas laudantium aspernatur possimus reiciendis vitae ducimus labore quidem velit vel temporibus! Illo sunt placeat officiis, tiure magnam. Ad sit perferendis ducimus dicta, est aspernatur asperiores, quasi beatae quos deleniti.









Cosa significa stile a fisarmonica?


 Laudantium quibusdam laboriosam hic omnis quas ullam commodi rem. Architecto ut laborum eaque cum porro doloremque hic cupiditate tempora temporibus ducimus dolores magnam quidem, facilis sapiente officiis voluptas? Velo, non!









Chiudi tutto ×

CSS

Copia il CSS sopra del metodo Checkbox poiché entrambi i metodi differiscono solo dal punto di vista strutturale. Potresti notare che c'è una scheda sempre aperta. Questo accade perché non puoi deselezionare i pulsanti di opzione come le caselle di controllo. Per fare ciò, aggiungi il codice CSS sottostante a un pulsante di opzione "Chiudi tutto" senza alcuna descrizione.

/* Chiudo tutto */
.faq-label {
 posizione: relativa;
}
.faq-chiudi {
 display: blocco in linea;
 imbottitura: 1rem;
 dimensione del carattere: 1rem;
 sfondo: #b61818;
 cursore: puntatore;
 posizione: assoluta;
 sinistra: 64 rem;
}

Produzione:

Continua a sperimentare e aggiungi animazioni

C'è una semplice logica dietro le fisarmoniche: quando fai clic su un menu, apparirà il suo contenuto nascosto. Dal momento che ora sai come creare una fisarmonica, è giunto il momento di implementare e sperimentare il tuo apprendimento. Puoi costruire fisarmoniche orizzontali per migliorare il design, specialmente quando visualizzi le immagini. Sperimenta con il codice regolando l'effetto di transizione usando le animazioni dei fotogrammi chiave.

Naincy Mourya (16 Articoli Pubblicati)

Naincy è specializzata nella creazione di siti Web altamente reattivi e in una strategia di contenuto efficiente insieme a copie Web. È una scrittrice tecnologica freelance che tiene d'occhio le tecnologie di tendenza.

Altro da Naincy Mourya