M

MLOG

Lietuvių

Įvaldykite meną kurti išskirtinai CSS akordeonus su vieno atidarymo funkcionalumu, gerindami vartotojo patirtį ir prieinamumą įvairiose interneto platformose.

Išskirtinai CSS akordeonai: vieno atidarymo valdiklių kūrimas geresnei vartotojo patirčiai

Akordeonai yra pagrindinis šiuolaikinio interneto dizaino elementas, suteikiantis švarų ir efektyvų būdą pateikti didelius informacijos kiekius lengvai įsisavinamu formatu. Jie ypač naudingi DUK, produktų aprašymams ir navigacijos meniu. Šiame straipsnyje gilinamasi į išskirtinai CSS akordeonų kūrimą su vieno atidarymo elgsena, o tai reiškia, kad vienu metu gali būti atidaryta tik viena akordeono sekcija. Šis metodas pagerina vartotojo patirtį, nes apsaugo nuo turinio perkrovos ir skatina sutelktą naršymą.

Išskirtinai CSS akordeonų privalumų supratimas

Tradiciniams JavaScript pagrįstiems akordeonams dažnai reikia valdyti būseną ir apdoroti įvykius, o tai gali padidinti jūsų kodo sudėtingumą. Kita vertus, išskirtinai CSS akordeonai išnaudoja CSS selektorių ir :checked pseudo-klasės galią, kad pasiektų norimą funkcionalumą nepasikliaudami JavaScript. To rezultatas:

Statybiniai blokai: HTML struktūra

Mūsų išskirtinai CSS akordeono pagrindas yra gerai struktūrizuota HTML žymėjimo kalba. Naudosime šiuos elementus:

Štai pagrindinė HTML struktūra:


<div class="accordion-container">
  <input type="radio" name="accordion" id="section1">
  <label for="section1">1 sekcijos pavadinimas</label>
  <div class="accordion-content">
    <p>1 sekcijos turinys.</p>
  </div>

  <input type="radio" name="accordion" id="section2">
  <label for="section2">2 sekcijos pavadinimas</label>
  <div class="accordion-content">
    <p>2 sekcijos turinys.</p>
  </div>

  <input type="radio" name="accordion" id="section3">
  <label for="section3">3 sekcijos pavadinimas</label>
  <div class="accordion-content">
    <p>3 sekcijos turinys.</p>
  </div>
</div>

Paaiškinimas:

Akordeono stilizavimas su CSS

Dabar pridėkime CSS, kad stilizuotume akordeoną ir įgyvendintume vieno atidarymo elgseną.


.accordion-container {
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

input[type="radio"] {
  display: none;
}

label {
  display: block;
  padding: 10px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  background-color: #fff;
  display: none; /* Iš pradžių paslėpti turinį */
}

input[type="radio"]:checked + label {
  background-color: #ddd;
}

input[type="radio"]:checked + label + .accordion-content {
  display: block; /* Rodyti turinį, kai radijo mygtukas pažymėtas */
}

Paaiškinimas:

Prieinamumo gerinimas su ARIA atributais

Siekiant užtikrinti, kad mūsų akordeonas būtų prieinamas vartotojams su negalia, turime pridėti ARIA atributus. ARIA (Accessible Rich Internet Applications) atributai suteikia semantinę informaciją pagalbinėms technologijoms, tokioms kaip ekrano skaitytuvai.

Štai kaip galime pagerinti prieinamumą:


<div class="accordion-container" role="presentation"> 
  <input type="radio" name="accordion" id="section1" aria-controls="content1">
  <label for="section1" aria-expanded="false" aria-controls="content1">1 sekcijos pavadinimas</label>
  <div id="content1" class="accordion-content" role="region" aria-labelledby="section1">
    <p>1 sekcijos turinys.</p>
  </div>

  <input type="radio" name="accordion" id="section2" aria-controls="content2">
  <label for="section2" aria-expanded="false" aria-controls="content2">2 sekcijos pavadinimas</label>
  <div id="content2" class="accordion-content" role="region" aria-labelledby="section2">
    <p>2 sekcijos turinys.</p>
  </div>

  <input type="radio" name="accordion" id="section3" aria-controls="content3">
  <label for="section3" aria-expanded="false" aria-controls="content3">3 sekcijos pavadinimas</label>
  <div id="content3" class="accordion-content" role="region" aria-labelledby="section3">
    <p>3 sekcijos turinys.</p>
  </div>
</div>

Paaiškinimas:

Svarbūs aspektai prieinamumui:

Pritaikymas ir patobulinimai

Pagrindinis išskirtinai CSS akordeonas gali būti toliau pritaikomas ir tobulinamas, kad atitiktų specifinius dizaino reikalavimus.

Perėjimų (Transitions) pridėjimas

Norėdami sukurti sklandesnę vartotojo patirtį, galime pridėti CSS perėjimus akordeono turiniui.


.accordion-content {
  padding: 10px;
  background-color: #fff;
  display: none;
  transition: max-height 0.3s ease-out; /* Pridėti perėjimą */
  max-height: 0;
  overflow: hidden;
}

input[type="radio"]:checked + label + .accordion-content {
  display: block;
  max-height: 500px; /* Nustatyti maksimalų aukštį perėjimui */
}

Paaiškinimas:

Stilizavimas su piktogramomis

Piktogramų pridėjimas prie akordeono antraščių gali pagerinti vizualinį patrauklumą ir vartotojo supratimą. Tam galite naudoti CSS pseudo-elementus arba šriftų piktogramas.

Naudojant CSS pseudo-elementus:


label::after {
  content: '+'; /* Pradinė piktograma */
  float: right;
  font-size: 1.2em;
}

input[type="radio"]:checked + label::after {
  content: '-'; /* Pakeisti piktogramą išskleidus */
}

Naudojant šriftų piktogramas (pvz., Font Awesome):

  1. Į savo HTML įtraukite Font Awesome CSS: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="..." crossorigin="anonymous" />
  2. Savo etiketėse naudokite atitinkamas Font Awesome klases:

<label for="section1">1 sekcijos pavadinimas <i class="fas fa-plus"></i></label>

Tada, naudokite CSS, kad pakeistumėte piktogramą, kai sekcija yra išskleista:


input[type="radio"]:checked + label i.fas.fa-plus {
  display: none;
}

input[type="radio"]:checked + label {
    /* įterpti minuso piktogramą */
}

input[type="radio"]:checked + label::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f068"; /* fa-minus unicode */
    float:right;
}

Adaptyvaus dizaino aspektai

Užtikrinkite, kad jūsų akordeonas gerai veiktų skirtingų dydžių ekranuose, naudodami adaptyvaus dizaino technikas. Galite naudoti medijos užklausas (media queries), kad pritaikytumėte akordeono stilių pagal ekrano plotį.

Pavyzdys:


@media (max-width: 768px) {
  .accordion-container {
    width: 100%; /* Pritaikyti plotį mažesniems ekranams */
  }

  label {
    padding: 8px;
    font-size: 0.9em; /* Pritaikyti šrifto dydį */
  }
}

Pažangios technikos

Nors pagrindinis išskirtinai CSS akordeonas suteikia tvirtą pagrindą, yra pažangių technikų, kurios gali dar labiau pagerinti jo funkcionalumą ir vartotojo patirtį.

Būsenos išsaugojimas su „Local Storage“

Galite naudoti JavaScript (nors tai paneigia gryno CSS požiūrį) ir „local storage“, kad prisimintumėte akordeono būseną, todėl kai vartotojas grįš į puslapį, anksčiau atidarytos sekcijos vis dar bus atidarytos.

Dinaminis turinio įkėlimas

Akordeonams su dideliu kiekiu turinio, galite įkelti turinį dinamiškai naudojant AJAX. Tai gali pagerinti pradinį puslapio įkėlimo laiką ir sumažinti pralaidumo naudojimą.

Dažniausių problemų sprendimas

Štai keletas dažniausiai pasitaikančių problemų, su kuriomis galite susidurti diegdami išskirtinai CSS akordeonus, ir kaip jas išspręsti:

Pavyzdžiai iš realaus pasaulio

Išskirtinai CSS akordeonai gali būti naudojami įvairiuose realaus pasaulio scenarijuose:

Išvados

Išskirtinai CSS akordeonai su vieno atidarymo funkcionalumu siūlo galingą ir efektyvų būdą pagerinti vartotojo patirtį ir prieinamumą jūsų svetainėje. Išnaudodami CSS selektorių ir ARIA atributų galią, galite sukurti interaktyvius elementus, kurie yra našūs, lengvai prižiūrimi ir prieinami plačiam vartotojų ratui. Nesvarbu, ar kuriate paprastą DUK puslapį, ar sudėtingą interneto programą, išskirtinai CSS akordeonai gali padėti jums pateikti informaciją aiškiai ir patraukliai, prisidedant prie geresnės bendros vartotojo patirties pasaulinei auditorijai.

Papildomi mokymosi šaltiniai