Cum se creează acordeon de conținut bazat pe CSS
În tutorialul de astăzi vom învăța cum putem crea un acordeon de conținut orizontal și vertical folosind doar CSS3. Există multe pluginuri jQuery care pot face acest lucru pentru dvs., dar ce faceți dacă vizitatorul are Javascript oprit, atunci acordeonul nu va funcționa corect. Dacă acordeonul dvs. este pur și simplu în CSS, atunci acesta va funcționa pentru toți vizitatorii dvs..
Vom crea o orizontală și vertical acordeon de conținut. Când faceți clic pe textul principal, diapozitivul se va deschide afișând întregul conținut, iar aici este o previzualizare rapidă (capturi de ecran) cum arată.
Ca ceea ce vezi? Să începe codarea!
1. Pregătirea HTML și a conținutului
Pentru început, vom crea HTML pentru acordeon.
Structura are nevoie de un container div și apoi au secțiune pentru fiecare diapozitiv din acordeon. În acest exemplu vom avea 5 diapozitive. Fiecare dintre diapozitive va avea un titlu și un paragraf pentru conținut.
Despre noi
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, stai amet elementum mi. Fusce posuere nunc un mi tempus masculin. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris stai amet justo tempor nec neclare magna molestie. Etiam placerat susține dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec joe ante, ne semper 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 rezultat. Phasellus eu erat enim. Preasent la magna non massa dapibus scelerisque în eu lorem.
Servicii
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, stai amet elementum mi. Fusce posuere nunc un mi tempus masculin. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris stai amet justo tempor nec neclare magna molestie. Etiam placerat susține dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec joe ante, ne semper 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 rezultat. Phasellus eu erat enim. Preasent la magna non massa dapibus scelerisque în eu lorem.
Blog
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, stai amet elementum mi. Fusce posuere nunc un mi tempus masculin. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris stai amet justo tempor nec neclare magna molestie. Etiam placerat susține dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec joe ante, ne semper 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 rezultat. Phasellus eu erat enim. Preasent la magna non massa dapibus scelerisque în eu lorem.
Portofoliu
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, stai amet elementum mi. Fusce posuere nunc un mi tempus masculin. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris stai amet justo tempor nec neclare magna molestie. Etiam placerat susține dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec joe ante, ne semper 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 rezultat. Phasellus eu erat enim. Preasent la magna non massa dapibus scelerisque în eu lorem.
a lua legatura
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, stai amet elementum mi. Fusce posuere nunc un mi tempus masculin. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris stai amet justo tempor nec neclare magna molestie. Etiam placerat susține dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec joe ante, ne semper 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 rezultat. Phasellus eu erat enim. Preasent la magna non massa dapibus scelerisque în eu lorem.
Acum, avem diapozitivele noastre, putem incepe stilul acordeonului.
2. Styling CSS
În primul rând trebuie să stilul conținutului div de acordeon. Acest lucru ne va da o idee despre cum să afișăm fiecare dintre diapozitive și fiecare titlu.
/ * Definiți caseta Acordeon * / .acordion lățime: 830px; overflow: ascuns; margine: 10 pixeli auto; culoare: # 474747; fundal: # 414141; padding: 10px;
Apoi vom crea titlurile pentru fiecare dintre diapozitive.
.acordeon secțiune float: stânga; overflow: ascuns; Culoare: # 333; cursor: pointer; fundal: # 333; margin: 3px; .Acord de secțiune: hover background: # 444;
Vom seta culoarea de fundal pentru a fi gri închis pe secțiune pentru a fi titlul în care vizitatorii vor face clic pentru a afișa diapozitivul. Folosim această secțiune atât pentru titlu, cât și pentru conținut, ceea ce înseamnă că putem folosi mai puțin HTML și reutilizăm titlul diapozitivului ca titlul conținutului.
.acordeon p p display: none;
În momentul de față, toate diapozitivele vor fi închise, așa că trebuie să ne asigurăm că paragraful este ascuns de vedere până când diapozitivul este deschis, deci pentru acum setați afișarea paragrafului la nici unul.
.acordeon: după poziție: relativă; font-size: 24px; color: # 000; font-weight: bold; . secțiunea acordeon: n-copil (1): după conținut: '1'; secțiunea acordeon: n-copil (2): după conținut: '2'; secțiunea de acordeon: n-copil (3): după conținut: '3'; . secțiunea de acorduri: n-copil (4): după conținut: '4'; . secțiunea de acordeon: n-copil (5): după conținut: '5';
Cu diapozitivele închise dorim să afișăm un număr în partea de jos a titlului pentru a spune care este diapozitivul pe care ne aflăm. Pentru aceasta vom folosi CSS pentru a adăuga conținut după titlul secțiunii, acest lucru se poate face folosind :după selector pseudo-clasă.
Acum am creat titlul pentru diapozitiv pe care putem face evenimentul clic pentru a afișa diapozitivul în acordeon. Dar există o problemă, CSS nu are un eveniment de clic, de aceea acordeonul este creat în mod normal prin utilizarea jQuery, astfel încât să putem atașa un eveniment de clic la textul titlu.
Trebuie să imităm evenimentul clic în CSS, care se poate face folosind :ţintă selector pseudo-clasă.
3. Utilizarea :ţintă Selector pseudo-clasă
:ţintă ne permite să modelam identificatorul fragmentului. Uneori folosim o etichetă de ancorare pe pagină pentru a indica un loc pe pagină. Când faceți clic pe linkul id în eticheta de ancorare devine ținta și puteți să folosiți acest stil :ţintă selector.
Pentru a adăuga acest lucru în acordeon trebuie să adăugăm o legătură în jurul titlului care indică un an id al diapozitivului.
Despre noi
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, stai amet elementum mi. Fusce posuere nunc un mi tempus masculin. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris stai amet justo tempor nec neclare magna molestie. Etiam placerat susține dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec joe ante, ne semper 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 rezultat. Phasellus eu erat enim. Preasent la magna non massa dapibus scelerisque în eu lorem.
.acordeon secțiune: țintă background: #FFF; padding: 10px; .acordiune secțiune: țintă: hover background: #FFF; . secțiunea de acționare: țintă h2 lățime: 100%; .Acordul secțiunea: ținta h2 a culoare: # 333; padding: 0; . secțiunea de acționare: țintă p display: block; . secțiunea acordeon h2 a padding: 8px 10px; display: block; font-size: 16px; font-weight: normal; Culoare: #eee; text-decoration: none;
Codul de mai sus va schimba dimensiunea diapozitivului pentru a se potrivi cu restul acordeonului și va schimba culoarea de fundal în alb. Paragraful a fost ascuns, iar acum în țintă trebuie să afișăm paragraful.
Acum când faceți clic pe titlul acordeonului, diapozitivul va schimba stilul pentru a afișa conținutul diapozitivului.
4. Acordeon orizontal
Codul de mai sus va crea acordeonul general, acum putem începe modificările CSS pentru diferențele dintre acordeon orizontal și vertical. Ambele acordeoane au aceeași funcționalitate, dar stilul principal ar fi diferit.
.secțiune orizontală lățime: 5%; height: 250px; -moz-tranziție: lărgimea de 0,2 secunde; -webkit-tranziție: lărgimea de 0,2 secunde; -o-tranziție: lărgimea de 0,2 secunde; tranziție: lărgimea de 0,2 secunde;
Mai întâi am setat lăţime din secțiunea de titlu la 5%, deci este un diapozitiv închis. Întrucât secțiunea este atât titlul, cât și conținutul pentru diapozitiv, trebuie să adăugăm animația pentru a afișa conținutul utilizând proprietatea de tranziție.
/ * Poziționați numărul de diapozitiv * /. Secțiune orizontală: după top: 140px; stânga: 15px;
Poziția numărului pe diapozitiv va avea aceeași poziție pe fiecare titlu închis, acestea fiind poziționate diferit față de titlurile verticale.
/ * Antet al diapozitivului închis * /. Secțiune orizontală h2 -webkit-transform: rotate (90deg); -moz-transformare: roti (90deg); -o-transform: rotiți (90deg); transforma: roti (90deg); lățime: 240 de pixeli; Poziția: relativă; stânga: -100px; top: 85px; / * Cu mouse-ul peste diapozitiv deschis * /. Horizontal: țintă lățime: 73%; height: 230px; . orizontal: ținta h2 top: 0px; stânga: 0; -webkit-transform: rotate (0deg); -moz-transform: rotate (0deg); -o-transform: rotiți (0deg); transform: rotire (0deg);
Codul de mai sus va schimba dimensiunea diapozitivului pentru a se potrivi cu restul acordeonului. Titlul a fost rotit vertical pentru a rula în jos titlul, dar acum cu diapozitiv deschis avem nevoie pentru a schimba textul înapoi pentru a fi orizontal prin rotirea textului înapoi la 0 grade.
5. Acordeon vertical
Acordeonul vertical funcționează la fel ca acordeonul orizontal, cu excepția faptului că trebuie să schimbăm înălţime in loc de lăţime și nu trebuie să modificăm alinierea textului.
.secțiunea verticală lățime: 100%; înălțime: 40px; -webkit-tranziție: înălțime de 0,2 secunde; -moz-tranziție: înălțime de 0,2 secunde; -o-tranziție: înălțime de 0,2 secunde; tranziție: înălțime de 0,2 secunde; / * Setarea înălțimii diapozitivului * / .vertical: target height: 250px; lățime: 97%;
Pe ţintă evenimentul de acordeon vertical pe care îl vom schimba înălţime din titlu pentru a afișa diapozitivul.
.secțiunea verticală h2 poziție: relativă; stânga: 0; sus: -15px; / * Setați poziția numărului pe diapozitiv * / secțiunea verticală: după top: -60px; stânga: 810px; . verticale: țintă: după left: -9999px;
Cele de mai sus vor schimba poziţie din textul principal pe diapozitivul închis. Cu diapozitivul închis trebuie să setăm poziţie din numărul care se află în partea dreaptă a acordeonului. Când diapozitivul este deschis, trebuie să ascundem acest număr pe titlu când țintă este setat, astfel încât să schimbăm poziția stângă de pe ecran.
Acum când faceți clic pe titlul acordeonului, diapozitivul va schimba stilul pentru a afișa conținutul diapozitivului.
Nota editorului: Această postare este scrisă de Paul Underwood pentru Hongkiat.com. Paul este un dezvoltator PHP Web din Bristol, Marea Britanie. El scrie tutoriale despre Web Development: subiectele principale includ PHP, jQuery, CSS3 și HTML5. De asemenea, înregistrează fragmente de coduri utile la Paulund.co.uk.
