4 veidi, kā izveidot Awesome CSS-tikai harmonijas
Satura akordeoni ir noderīgs dizaina modelis. Tos var izmantot daudzām dažādām lietām: izvēlnēm, sarakstiem, attēliem, rakstu fragmentiem, teksta fragmentiem un pat videoklipiem
Lielākā daļa akordeonu paļaujas uz to JavaScript, galvenokārt uz jQuery, bet, tā kā progresīvo CSS3 metožu izmantošana kļuva plaši izplatīta, mēs varam arī atrast jauku piemēru izmantot tikai HTML un CSS, kas padara tos pieejamus vidē ar invalīdu JavaScript.
CSS-tikai akordeonu izveide var būt grūts uzdevums, tāpēc šajā amatā mēs centīsimies izprast galvenos koncepcijas izstrādātājus, kad tie ir jāizveido.
Veidojot tikai CSS cilnes, parasti ir divas galvenās pieejas, katrai no tām ir divi biežie lietošanas gadījumi. Tiek izmantota pirmā pieeja slēptās formas elementi, otrais izmanto CSS pseido-selektori.
1. Radio pogas metode
Radio pogas metode katrai akordeona cilnei pievieno slēpto radio ievadi un atbilstošu etiķetes tagu. Loģika ir vienkārša: kad lietotājs izvēlas cilni, tās pamatā pārbauda radio cilni, kas pieder šai cilnei, tādā pašā veidā, aizpildot veidlapu. Kad viņi noklikšķina uz nākamās cilnes akordeonā, viņi izvēlas nākamo radio pogu utt.
Šajā metodē, var būt atvērta tikai viena cilne tajā pašā laikā. HTML loģika izskatās šādi:
Satura nosaukums (nelietojiet h1 tagu šeit)
Dažs saturs…
p>
Tev vajag pievienojiet atsevišķu radio marķējuma pāri katrai cilnei akordeonā. HTML vien nepiešķir vēlamo uzvedību, jums ir jāpievieno arī atbilstošie CSS noteikumi, paskatīsimies, kā to paveikt.
Fiksētās augstuma vertikālās cilnes
Šajā risinājumā (skatiet zemāk redzamo ekrānuzņēmumu), attīstītājs slēpa radio pogu, izmantojot displejs: nav; noteikums, tad viņš sniedza relatīvo pozīciju uz etiķetes taga, kas satur katras cilnes nosaukumu, un absolūto pozīciju attiecīgajam etiķete: pēc pseidoelements.
Pēdējais tur rokturi ar zaļu + zīmi, kas atver cilnes. Aizvērtās cilpās tiek izmantots arī zaļš marķējums “-” zīmes. CSS aizvērtās cilnes tiek atlasītas ar elementa + elementa selektora palīdzību.
Jums ir arī jānorāda atklātās cilnes saturs fiksētā augstumā. Lai to izdarītu, ar elementa1 ~ element2 CSS selektoru atlasiet atvērtās cilnes korpusu (atzīmēts ar iepriekšminētajā HTML tabulas satura klasi).
CSS galvenā loģika ir šāda:
ieeja [tips = radio] displejs: nav; label position: relatīvais; displejs: bloks; etiķete: pēc saturs: "+; pozīcija: absolūta; tiesības: 1em; ievade: pārbaudīta + etiķete: pēc saturs: "-"; ievade: pārbaudīta ~ .tab-content augstums: 150px;
Jūs varat apskatīt pilnu CSS šeit Codepen. CSS sākotnēji ir rakstīts Sass, bet, ja jūs noklikšķināt uz “Skatīt apkopoto” poga, jūs varat redzēt apkopoto CSS failu.
Attēlu saskaņošana ar radio pogām
Šis skaistais attēla akordeons izmanto to pašu radio pogas metodi, bet etiķetes vietā attīstītājs šeit izmantoja HTML tagu figcaption veikt akordeona uzvedību.
CSS ir nedaudz atšķirīgs, galvenokārt tāpēc, ka šajā gadījumā cilnes nav novietotas vertikāli, bet horizontāli. Izstrādātājs izmantoja elementa + elementa CSS selektoru (kas tika izmantots iepriekšējā gadījumā, lai izvēlētos pārslēgumus), lai nodrošinātu, ka aptverto attēlu malas joprojām ir redzamas.
Izlasiet detalizētu rokasgrāmatu par to, kā izveidot šo eleganto CSS vienīgo harmoniku.
2. izvēles rūtiņas metode
Izvēles rūtiņas metode izmanto izvēles rūtiņas ievades tipa izvēles rūtiņu. Kad lietotājs izvēlas cilni, tās pamatā pārbauda attiecīgo izvēles rūtiņu.
Atšķirība, salīdzinot ar radio pogas metodi, ir tā, ka tā ir vienlaicīgi var atvērt vairākas cilnes, tāpat kā ir iespējams pārbaudīt vairāk nekā vienu izvēles rūtiņu veidlapas iekšpusē.
No otras puses, cilnes neaizveras pašas, kad lietotājs noklikšķinās uz cita. HTML loģika ir tāda pati kā iepriekš, tikai šajā gadījumā ir jāizmanto ievades veida izvēles rūtiņa.
Satura nosaukums (nelietojiet h1 tagu šeit)
Dažs saturs…
p>
Fiksētā augstuma izvēles rūtiņa atbilstība
Ja vēlaties noteikt fiksētas augstuma satura cilnes, CSS loģika ir gandrīz tāda pati kā radio pogas gadījumā, tas ir tikai ievades veids, kas ir mainīts no radio uz izvēles rūtiņu. Šajā Codepen pildspalvā varat apskatīt kodu.
Šķidruma augstuma izvēles rūtiņa atbilstība
Ja vienlaicīgi ir atvērtas vairākas cilnes, fiksēto augstumu cilņu parādīšana var negatīvi ietekmēt lietotāja pieredzi, jo akordeona augstums var ievērojami pieaugt. To var uzlabot, ja jūs mainīt fiksēto augstumu līdz šķidruma augstumam; tas nozīmē, ka atvērto cilpu augstums palielinās vai saraujas atbilstoši turētā satura lielumam.
Lai to izdarītu, jums ir nepieciešams mainīt fiksēto cilnes satura augstumu līdz maksimālajam augstumam, un izmantot relatīvās vienības:
ievade: pārbaudīta ~ .tab saturs max-height: 50em;
Ja vēlaties labāk izprast, kā šī metode darbojas, varat apskatīt šo Codepen.
3. Mērķa metode
: mērķis ir viens no CSS3 pseido-selektoriem. Ar savu palīdzību jūs varat saistīt HTML elementu ar enkura tagu šādā veidā:
Cilnes nosaukums
Cilnes saturs
Kad lietotājs noklikšķina uz cilnes nosaukuma, visa sadaļa tiks atvērta, pateicoties : Mērķis pseido-selektors, un URL tiks mainīts arī uz šādu formātu: www.some-url.com/#tab-1.
Atvērtā cilne var tikt veidota CSS ar sadaļa: mērķis … noteikums. Mums ir lieliska apmācība šeit par hongkiat par to, kā jūs varat izveidot jauku CSS-tikai akordeonu ar : Mērķis metode gan vertikāli, gan horizontāli.
Galvenais trūkums : Mērķis metode ir tā tas maina URL, kad lietotājs noklikšķina uz cilnēm. Tas ietekmē pārlūkprogrammas vēsturi un pārlūkprogrammas atpakaļ poga neuzņems lietotāju uz iepriekšējo lapu, bet uz akordeona iepriekšējo stāvokli.
4.: Hover metode
Šo pēdējo trūkumu var pārvarēt, ja mēs to izmantosim : lidināties CSS pseido selektors, nevis : Mērķis, bet šajā gadījumā cilnes nereaģēs uz klikšķi, bet uz lidojuma notikumu. Triks šeit ir tas, ka jums ir nepieciešams vai nu slēpt neatklātos elementus, vai samazināt to platumu vai augstumu - atkarībā no cilnēm
Lai padarītu akordeonu darbu, ir jābūt redzamam elementam vai jābūt iestatītam uz pilnu platumu / augstumu.
Visi trīs CSS tikai akordeoni tika veikti ar: hover metodi, noklikšķiniet uz saites zem ekrānuzņēmumiem, lai apskatītu kodu.
Horizontālā attēla harmonija
Izliekts akordeons
Aktivizētais akordeons ar noklusējuma valsti
