Come creare una fisarmonica basata su CSS
Nel tutorial di oggi impareremo come possiamo creare un fisarmonica del contenuto orizzontale e verticale usando semplicemente CSS3. Ci sono molti plugin jQuery che possono fare questo lavoro per te, ma cosa fai se il visitatore ha disattivato Javascript, quindi la fisarmonica non funzionerà correttamente. Se la tua fisarmonica è puramente in CSS, funzionerà per tutti i tuoi visitatori.
Creeremo a orizzontale e verticale contenuto di fisarmonica. Facendo clic sul testo del titolo si aprirà la diapositiva visualizzando l'intero contenuto, ed ecco una rapida anteprima (schermate) come appaiono.
Ti piace quello che vedi? Lascia che inizi la codifica!
1. Preparazione di HTML e contenuti
Per cominciare, creeremo l'HTML per la fisarmonica.
La struttura ha bisogno di un contenitore div e poi avere un sezione per ogni diapositiva nella fisarmonica. In questo esempio avremo 5 diapositive. Ciascuna diapositiva avrà un titolo e un paragrafo per il contenuto.
Riguardo a noi
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non sempre mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent a magna non massa dapibus scelerisque in eu lorem.
Servizi
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non sempre mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent a magna non massa dapibus scelerisque in eu lorem.
blog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non sempre mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent a magna non massa dapibus scelerisque in eu lorem.
Portafoglio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non sempre mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent a magna non massa dapibus scelerisque in eu lorem.
Contatto
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non sempre mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent a magna non massa dapibus scelerisque in eu lorem.
Ora abbiamo le nostre diapositive che possiamo iniziare a modellare la fisarmonica.
2. Styling CSS
Per prima cosa dobbiamo dare uno stile al contenuto div della fisarmonica. Questo ci darà un'idea di come visualizzare ciascuna delle diapositive e ciascuno dei titoli.
/ * Definisci la scatola della fisarmonica * / .accordion width: 830px; overflow: hidden; margine: 10px auto; color: # 474747; background: # 414141; padding: 10px;
Quindi creeremo i titoli per ciascuna diapositiva.
.sezione di fisarmonica float: left; overflow: hidden; color: # 333; cursor: pointer; sfondo: # 333; margin: 3px; . sezione access: hover background: # 444;
Stiamo impostando il colore dello sfondo in grigio scuro sulla sezione per essere il titolo in cui i visitatori faranno clic per visualizzare la diapositiva. Stiamo utilizzando questa sezione sia per il titolo che per il contenuto, il che significa che siamo in grado di utilizzare meno HTML e riutilizzare il titolo della diapositiva come titolo del contenuto.
.sezione fisarmonica p display: none;
Al momento tutte le diapositive saranno chiuse quindi dobbiamo assicurarci che il paragrafo sia nascosto dalla vista fino a quando la diapositiva non è aperta, quindi per ora imposta la visualizzazione del paragrafo su nessuna.
.sezione fisarmonica: dopo posizione: relativa; font-size: 24px; color: # 000; font-weight: bold; .accordion section: nth-child (1): after content: '1'; .accordion section: nth-child (2): after content: '2'; .accordion section: nth-child (3): after content: '3'; .accordion section: nth-child (4): after content: '4'; .accordion section: nth-child (5): after content: '5';
Con le diapositive chiuse, vogliamo mostrare un numero in fondo al titolo per dire su quale numero scivolare. Per questo useremo i CSS per aggiungere contenuti dopo il titolo della sezione, questo può essere fatto usando il :dopo selettore pseudo-classe.
Ora abbiamo creato il titolo per la diapositiva, possiamo fare l'evento click per visualizzare la diapositiva nella fisarmonica. Ma c'è un problema, il CSS non ha un evento click, motivo per cui la fisarmonica viene normalmente creata usando jQuery in modo che possiamo allegare un evento click al testo del titolo.
Dobbiamo imitare l'evento click in CSS che può essere fatto usando il :bersaglio selettore pseudo-classe.
3. Uso :bersaglio selettore pseudo-classe
:bersaglio ci consente di definire l'identificatore del frammento. A volte utilizziamo un tag di ancoraggio in-page per puntare a un punto della pagina. Facendo clic sul collegamento il id nel tag anchor diventa il target e puoi modellare questo usando il :bersaglio selettore.
Per aggiungere questo alla fisarmonica, dobbiamo aggiungere un collegamento attorno al titolo che punta a un id della diapositiva.
Riguardo a noi
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non sempre mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent a magna non massa dapibus scelerisque in eu lorem.
.sezione fisarmonica: target background: #FFF; padding: 10px; sezione .accordion: target: hover background: #FFF; . sezione dell'accessorio: target h2 width: 100%; . sezione accessor: target h2 a color: # 333; padding: 0; . sezione di autorizzazione: target p display: block; .accordion section h2 a padding: 8px 10px; blocco di visualizzazione; font-size: 16px; font-weight: normale; colore: #eee; text-decoration: none;
Il codice sopra cambierà la dimensione della diapositiva per adattarsi al resto della fisarmonica e cambierà il colore di sfondo in bianco. Il paragrafo era nascosto quindi ora sul target abbiamo bisogno di visualizzare il paragrafo.
Ora quando fai clic sul titolo della fisarmonica, la diapositiva cambierà stile per visualizzare il contenuto della diapositiva.
4. Fisarmonica orizzontale
Il codice sopra creerà la fisarmonica generale ora che possiamo iniziare a fare i cambiamenti CSS per le differenze tra la fisarmonica orizzontale e quella verticale. Entrambe queste fisarmoniche hanno la stessa funzionalità ma lo stile del titolo sarebbe diverso.
.sezione orizzontale larghezza: 5%; altezza: 250px; -moz-transition: width 0.2s easy-out; -webkit-transition: width 0.2s easy-out; -o-transizione: larghezza 0.2s disinvoltura; transizione: larghezza 0.2s facilità di uscita;
Per prima cosa impostiamo il larghezza della sezione del titolo al 5% quindi è una diapositiva chiusa. Poiché la sezione è sia il titolo che il contenuto della diapositiva, è necessario aggiungere l'animazione per visualizzare il contenuto utilizzando la proprietà di transizione.
/ * Posiziona il numero della slide * / .horizontal section: after top: 140px; a sinistra: 15px;
La posizione del numero sulla diapositiva sarà la stessa posizione su ciascun titolo chiuso, che sono posizionati in modo diverso rispetto ai titoli verticali.
/ * Intestazione della diapositiva chiusa * / .horizontal section h2 -webkit-transform: rotazione (90deg); -moz-transform: rotate (90deg); -o-trasforma: ruota (90 °); transform: ruotare (90 gradi); larghezza: 240px; position: relative; a sinistra: -100px; top: 85px; / * Al passaggio del mouse sulla diapositiva aperta * / .horizontal: target width: 73%; altezza: 230px; .horizontal: target h2 top: 0px; a sinistra: 0; -webkit-transform: rotate (0deg); -moz-transform: rotate (0deg); -o-trasforma: ruota (0 gradi); transform: ruotare (0deg);
Il codice sopra cambierà la dimensione della diapositiva per adattarsi al resto della fisarmonica. Il titolo è stato ruotato verticalmente per scorrere verso il basso del titolo, ma ora con la diapositiva aperta abbiamo bisogno di cambiare il testo indietro per essere orizzontale ruotando il testo di nuovo a 0 gradi.
5. Fisarmonica verticale
La fisarmonica verticale funziona allo stesso modo della fisarmonica orizzontale eccetto che dobbiamo cambiare la altezza invece del larghezza e non abbiamo bisogno di cambiare l'allineamento del testo.
.sezione verticale larghezza: 100%; altezza: 40px; -webkit-transition: height 0.2s easy-out; -moz-transizione: altezza 0.2s disinvoltura; -o-transizione: altezza 0.2s disinvoltura; transizione: altezza 0.2s facilità di uscita; / * Imposta l'altezza della diapositiva * / .vertical: target height: 250px; width: 97%;
Sul bersaglio evento della fisarmonica verticale stiamo per cambiare il altezza del titolo per visualizzare la diapositiva.
.sezione verticale h2 posizione: relativa; a sinistra: 0; top: -15px; / * Imposta la posizione del numero nella diapositiva * / .vertical section: after top: -60px; a sinistra: 810px; sezione verticale: target: after left: -9999px;
Quanto sopra cambierà il posizione del testo del titolo sulla diapositiva chiusa. Con la diapositiva chiusa abbiamo bisogno di impostare il posizione del numero che si trova a destra della fisarmonica. Quando la diapositiva è aperta, è necessario nascondere questo numero sul titolo quando il target è impostato in modo da cambiare la posizione sinistra dallo schermo.
Ora quando fai clic sul titolo della fisarmonica, la diapositiva cambierà stile per visualizzare il contenuto della diapositiva.
Nota dell'editore: Questo post è scritto da Paul Underwood per Hongkiat.com. Paul è uno sviluppatore web PHP di Bristol, Regno Unito. Scrive tutorial sullo sviluppo Web: argomenti principali includono PHP, jQuery, CSS3 e HTML5. Registra inoltre utili frammenti di codice su Paulund.co.uk.
