4 moduri de a crea acordeoane minunate pentru CSS

Acordeonul de conținut face un model util de design. Puteți să le utilizați pentru multe lucruri diferite: pentru meniuri, liste, imagini, fragmente de articole, fragmente de text și chiar videoclipuri

Cele mai multe acordeoane de acolo se bazează JavaScript, în principal pe jQuery, dar din moment ce utilizarea tehnicilor avansate CSS3 a devenit larg răspândită, putem găsi și exemple frumoase utilizați numai codurile HTML și CSS, care le fac accesibile în medii cu JavaScript dezactivat.

Crearea de acordeoane numai pentru CSS poate fi o sarcină dificilă, așa că în acest post vom încerca înțelegeți conceptele principale pe care dezvoltatorii le utilizează atunci când trebuie să le creeze.

În crearea filelor CSS-uri există de obicei două abordări principale, fiecare dintre ele având două cazuri frecvente de utilizare. Se folosește prima abordare elemente de formă ascunse, în timp ce al doilea utilizează CSS pseudo-selectori.

1. Metoda Buton Radio

Metoda Buton radio adaugă o intrare radio ascunsă și o etichetă de etichetă corespunzătoare fiecărui fișier al acordeonului. Logica este simplă: atunci când utilizatorul selectează o filă, ei verifică practic butonul radio care aparține acelei file, la fel ca atunci când completează un formular. Când fac clic pe următoarea filă din acordeon, ele selectează următorul buton radio, etc.

În această metodă, numai o singură filă poate fi deschisă in acelasi timp. Logica HTML-ului arată cam așa:

 
  
  Titlul tabelului 1 
 
Titlul conținutului (nu folosiți eticheta h1 aici)
 
Unele conținut ... 
p> 
 
  
 

Trebuie să adăugați o pereche separată de etichete radio pentru fiecare filă în acordeon. Numai codul HTML nu va da comportamentul dorit, trebuie să adăugați și regulile corespunzătoare CSS, să vedem cum puteți realiza acest lucru.

Înălțimea verticală fixă ​​înălțime

În această soluție (a se vedea imaginea de mai jos), dezvoltatorul a ascuns butonul radio cu ajutorul funcției afișare: niciuna; , atunci el a dat o poziție relativă la eticheta de etichetă care deține titlul fiecărei file și o poziție absolută față de cea corespunzătoare etichetă: după pseudo-element de.

Acesta din urmă deține mânerul marcat cu un semn verde + care deschide filele. Urechile închise utilizează de asemenea un mâner marcat cu verde “-” semne. În CSS, filele închise sunt selectate cu ajutorul selectorului element + element.

De asemenea, trebuie să oferiți conținutului filei deschise o înălțime fixă. Pentru a face acest lucru, selectați corpul filei deschise (marcat cu clasa de conținut tab-ul din HTML de mai sus) cu ajutorul selectorului CSS element1 ~ element2.

Logica de bază a CSS este următoarea:

 introduceți [type = radio] display: none;  etichetă poziție: relativă; afișare: bloc;  etichetă: după content: "+"; poziția: absolută; dreapta: 1em;  input: checked + label: după content: "-";  intrare: verificat ~ .tab-content height: 150px;  

Puteți să vă uitați la CSS completă aici pe Codepen. CSS este inițial scris în Sass, dar dacă faceți clic pe “Vizualizați compilația” , puteți vedea fișierul CSS compilat.

Image Accordion cu butoanele radio

Această acordeon imagine frumoasă folosește aceeași metodă pe buton radio, dar în loc de etichete, dezvoltatorul aici a folosit eticheta HTML pentru figcaption pentru a realiza comportamentul acordeonului.

CSS este oarecum diferită, în principal deoarece, în acest caz, filele nu sunt plasate pe verticală, ci pe orizontală. Dezvoltatorul a folosit selectorul CSS element + element (care a fost folosit în cazul anterior pentru a selecta comutatoarele) pentru a se asigura că marginile imaginilor acoperite rămân vizibile.

Citiți ghidul detaliat despre cum să creați acest acordeon elegant CSS.

2. Metoda Checkbox

Metoda casetei de selectare utilizează tipul de introducere a casetei de selectare în locul butonului radio. Când utilizatorul selectează o filă, verifică practic caseta de validare corespunzătoare.

Diferența față de metoda butonului radio este că este este posibil să deschideți mai mult de o filă în același timp, la fel cum este posibil să bifați mai multe casete de selectare în interiorul unui formular.

Pe de altă parte, filele nu se vor închide pe cont propriu atunci când utilizatorul face clic pe altul. Logica HTML este aceeași ca înainte, doar în acest caz trebuie să utilizați caseta de selectare pentru tipul de intrare.

 
  
  Titlul tabelului 1 
 
Titlul conținutului (nu folosiți eticheta h1 aici)
 
Unele conținut ... 
p> 
 
  
 

Caseta de verificare a înălțimii fixe

Dacă doriți filigranele de înălțime fixă, logica CSS este aproape la fel ca în cazul butonului radio, doar tipul de intrare a fost schimbat de la radio la caseta de selectare. În acest stilou veți putea vedea codul.

Fluidă Înălțime de verificare acordeon

Atunci când mai multe file sunt deschise în același timp, afișarea filelor de înălțime fixă ​​poate afecta negativ experiența utilizatorului, deoarece înălțimea acordeonului poate crește semnificativ. Acest lucru poate fi îmbunătățit dacă tu modificați înălțimea fixă ​​la înălțimea fluidului; adică înălțimea filelor deschise se extinde sau se micsorează în funcție de dimensiunea conținutului pe care îl dețin.

Pentru a face acest lucru este necesar modificați înălțimea fixă ​​a conținutului filelor la o înălțime maximă, și utilizează unitățile relative:

 intrări: verificate ~ .tab-content max-height: 50em;  

Dacă doriți să înțelegeți mai bine modul în care funcționează această metodă, puteți să vă uitați la acest Codepen.

3. Metoda țintă

: țintă este unul dintre pseudo-selectorii CSS3. Cu ajutorul acestuia puteți conecta un element HTML la o etichetă de ancorare în felul următor:

 
 
Titlul tabelului
 
Conținutul fila
 
 

Când utilizatorul face clic pe titlul unei file, întreaga secțiune se va deschide datorită :ţintă pseudo-selector, iar adresa URL va fi de asemenea schimbată în următorul format: www.some-url.com/#tab-1.

Fila deschisă poate fi creată în CSS cu ajutorul funcției secțiune: vizați ... regulă. Avem un tutorial grozav aici pe hongkiat despre cum poți să creezi niște acordeoane cu CSS frumoase doar cu :ţintă metode atât în ​​plan vertical cât și orizontal.

Principalul neajuns al :ţintă metoda este aceea modifică adresa URL atunci când utilizatorul face clic pe file. Acest lucru afectează istoricul browserului și butonul de revenire al browserului nu va duce utilizatorul la pagina anterioară, ci la starea anterioară a acordeonului.

4. Metoda de hovering

Acest din urmă deficiență poate fi depășit dacă folosim :planare CSS pseudo-selector în loc de :ţintă, dar în acest caz, filele nu vor reacționa la clic, ci la evenimentul de mutare. Trucul de aici este că trebuie să faci asta fie să ascundeți elementele neconvingate, sau reduce lățimea sau înălțimea lor - în funcție de aspectul filelor

Elementul plutind trebuie să fie vizibil sau setat la lățime / înălțime completă pentru a face munca acordeonului.

Următoarele trei acordeoane CSS au fost făcute cu metoda: hover, faceți clic pe linkurile de sub capturile de ecran pentru a arunca o privire la cod.

Orizontal Image Accordion

Acordeon îngust

Acordează acționarea hover-ului cu starea implicită