4 Ways za ustvarjanje Awesome CSS samo harmonike
Vsebina harmonike je uporaben vzorec oblikovanja. Uporabite jih lahko za veliko različnih stvari: za menije, sezname, slike, odlomke člankov, izrezke besedila in celo videoposnetke
Večina harmonike se opira na to JavaScript, predvsem na jQuery, Ker pa je uporaba naprednih CSS3 tehnik postala razširjena, lahko najdemo tudi lepe primere uporabljate samo HTML in CSS, dostopne v okoljih z onemogočenim JavaScriptom.
Ustvarjanje CSS-harmonik je lahko zapletena naloga, zato bomo v tem delu poskušali razumeti glavne koncepte, ki jih razvijalci uporabljajo, ko jih potrebujejo.
Pri izdelavi zavihkov samo za CSS sta običajno dva glavna pristopa, vsak od njih ima dva pogosta primera uporabe. Prvi pristop se uporablja skriti elementi obrazca, medtem ko drugi uporablja Psevdo selektorji CSS.
1. Metoda radijskega gumba
Metoda radijskega gumba doda skriti radijski vhod in ustrezno oznako oznake na vsak jeziček harmonike. Logika je preprosta: ko uporabnik izbere zavihek, v bistvu preveri izbirni gumb, ki pripada temu zavihku, na enak način, ko izpolni obrazec. Ko kliknejo na naslednji jeziček v harmoniki, izberejo naslednji izbirni gumb itd.
V tej metodi, Odpre se lahko samo en zavihek ob istem času. Logika HTML-ja je videti takole:
Naslov vsebine (tukaj ne uporabljajte oznake h1)
Nekaj vsebine…
p>
Moraš dodajte ločen par oznak za vsak zavihek v harmoniki. HTML sam ne bo dal želenega vedenja, morate dodati tudi ustrezna pravila za CSS, da vidimo, kako lahko to dosežete.
Fiksni navpični zavihki višine
V tej rešitvi (glej sliko spodaj) je razvijalec skrival izbirni gumb s pomočjo prikaz: nič; pravilo, potem je dal relativni položaj oznaki etikete, ki vsebuje naslov vsakega zavihka, in absolutni položaj ustreznega nalepka: po psevdoelement.
Slednji drži ročaj, označen z zelenim znakom +, ki odpre zavihke. Pri zaprtih jezičkih se uporablja tudi ročaj, označen z zeleno “-” znaki. V CSS so zaprti zavihki izbrani s pomočjo izbirnika element + element.
Vsebino odprtega zavihka morate podati tudi določeni višini. Če želite to narediti, izberite telo odprtega zavihka (označeno z razredom vsebine zavihka v HTML zgoraj) s pomočjo izbirnika elementov elementa ~ element2.
Osnovna logika CSS je naslednja:
input [type = radio] display: none; label position: relative; prikaz: blok; oznaka: po content: "+"; položaj: absolutno; desno: 1em; vhod: označeno + oznaka: po content: "-"; vhod: preverjeno ~ .tab-content height: 150px;
Celoten CSS si lahko ogledate tukaj na Codepen. CSS je prvotno napisana v Sass, če pa kliknete na “Prikaži prevedeno” lahko preberete prevedeno datoteko CSS.
Skladba slike z radijskimi gumbi
Ta čudovita slikovna harmonika uporablja enako metodo radijskega gumba, ampak namesto oznak, razvijalec tukaj je uporabil oznako HTML za prikaz doseči harmonično vedenje.
CSS je nekoliko drugačen, predvsem zato, ker v tem primeru jezički niso nameščeni navpično, ampak vodoravno. Razvijalec je uporabil CSS selektor elementa in elementa (ki je bil uporabljen v prejšnjem primeru za izbiro preklopov), da zagotovi, da so robovi posnetih slik še vedno vidni..
Preberite podrobna navodila o tem, kako ustvariti to elegantno harmoniko CSS.
2. Metoda potrditvenega polja
Metoda potrditvenega polja uporablja vrsto vnosa potrditvenega polja namesto radijskega gumba. Ko uporabnik izbere zavihek, v bistvu označi ustrezno potrditveno polje.
Razlika v primerjavi z metodo radijskega gumba je, da je hkrati lahko odprete več kot en zavihek, tako kot je mogoče preveriti več potrditvenih polj v obrazcu.
Po drugi strani pa se zavihki sami ne zaprejo, ko uporabnik klikne na drugo. Logika HTML-ja je enaka kot prej, samo v tem primeru morate uporabiti potrditveno polje za vrsto vnosa.
Naslov vsebine (tukaj ne uporabljajte oznake h1)
Nekaj vsebine…
p>
Fixed Height Checkbox Accordion
Če želite zavihke s fiksno višino vsebine, je logika CSS precej enaka kot v primeru radijskega gumba, samo tip vhoda se je spremenil iz radijskega v potrditveno polje. V tej pisavi Codepen si lahko ogledate kodo.
Polje za spreminjanje višine tekočine Accordion
Če je hkrati odprtih več zavihkov, lahko prikaz fiksnih jezičkov višine negativno vpliva na uporabniško izkušnjo, saj lahko višina harmonije znatno narašča. To se lahko izboljša, če spremenite fiksno višino na višino tekočine; to pomeni, da se višina odprtih zavihkov razširi ali skrči v skladu z velikostjo vsebine, ki jo imajo.
Za to morate spremenite fiksno višino vsebine zavihka na najvišjo višino, in uporabljajo relativne enote:
vhod: preverjeno ~ .tab-content max-height: 50em;
Če želite bolje razumeti, kako deluje ta metoda, si lahko ogledate to Codepen.
3. Ciljna metoda
: target je eden od psevdo-selektorjev CSS3. Z njegovo pomočjo lahko element HTML povežete s sidrno oznako na naslednji način:
Naslov zavihka
Vsebina zavihka
Ko uporabnik klikne naslov zavihka, se bo celoten del odprl zahvaljujoč : target psevdo-selektor in URL bo spremenjen v naslednjo obliko: www.some-url.com/#tab-1.
Odprt zavihek lahko s CSS s pomočjo section: target … pravilo. Tukaj imamo odlične vaje o hongkiatu o tem, kako lahko ustvarite lepe harmonike z CSS : target v navpični in vodoravni obliki.
Glavna pomanjkljivost : target metoda spremeni URL, ko uporabnik klikne na zavihke. To vpliva na zgodovino brskalnika in gumb za nazaj v brskalniku ne bo pripeljal uporabnika na prejšnjo stran, temveč na prejšnje stanje harmonike.
4. Metoda: hover
Slednjo pomanjkljivost lahko premagamo, če uporabimo : hover Psevdo-izbirnik CSS namesto : target, toda v tem primeru se zavihki ne bodo odzvali na klik, ampak na dogodek hover. Trik tukaj je, da morate ali skrijete nepokrite elemente, ali zmanjšajo njihovo širino ali višino - odvisno od postavitve zavihkov
Pokrit element mora biti viden, ali nastavljen na polno širino / višino, da bo harmonika delovala.
Naslednje 3 harmonike, ki uporabljajo samo CSS, so bile narejene z metodo: hover, kliknite na povezave pod zaslonskimi posnetki, da si ogledate kodo.
Horizontalna skladba slike
Nagnjena harmonika
Aktivirana harmonika s privzetim stanjem
