M

MLOG

Latviešu

Apgūstiet CSS akordeonu veidošanu ar viena atvēruma funkcionalitāti, uzlabojot lietotāja pieredzi un piekļūstamību dažādās tīmekļa platformās.

Tikai ar CSS veidoti akordeoni: Viena atvēruma logrīku izstrāde uzlabotai lietotāja pieredzei (UX)

Akordeoni ir moderna tīmekļa dizaina pamatelements, kas nodrošina tīru un efektīvu veidu, kā pasniegt lielu informācijas apjomu viegli uztveramā formātā. Tie ir īpaši noderīgi BUJ (Biežāk uzdotie jautājumi) sadaļām, produktu aprakstiem un navigācijas izvēlnēm. Šis raksts iedziļinās tikai ar CSS veidotu akordeonu izveidē ar viena atvēruma funkcionalitāti, kas nozīmē, ka vienlaikus var būt atvērta tikai viena akordeona sadaļa. Šī pieeja uzlabo lietotāja pieredzi, novēršot satura pārslodzi un veicinot mērķtiecīgu pārlūkošanu.

Izpratne par tikai ar CSS veidotu akordeonu priekšrocībām

Tradicionālie uz JavaScript balstītie akordeoni bieži prasa stāvokļa pārvaldību un notikumu apstrādi, kas var sarežģīt jūsu kodu. No otras puses, tikai ar CSS veidoti akordeoni izmanto CSS selektoru un `:checked` pseidoklases spēku, lai sasniegtu vēlamo funkcionalitāti, nepaļaujoties uz JavaScript. Tā rezultātā tiek panākts:

Pamatelementi: HTML struktūra

Mūsu tikai ar CSS veidotā akordeona pamatā ir labi strukturēts HTML marķējums. Mēs izmantosim šādus elementus:

Šeit ir pamata HTML struktūra:


<div class="accordion-container">
  <input type="radio" name="accordion" id="section1">
  <label for="section1">Section 1 Title</label>
  <div class="accordion-content">
    <p>Content for Section 1.</p>
  </div>

  <input type="radio" name="accordion" id="section2">
  <label for="section2">Section 2 Title</label>
  <div class="accordion-content">
    <p>Content for Section 2.</p>
  </div>

  <input type="radio" name="accordion" id="section3">
  <label for="section3">Section 3 Title</label>
  <div class="accordion-content">
    <p>Content for Section 3.</p>
  </div>
</div>

Paskaidrojums:

Akordeona stilizēšana ar CSS

Tagad pievienosim CSS, lai stilizētu akordeonu un ieviestu viena atvēruma funkcionalitāti.


.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; /* Initially hide the content */
}

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

input[type="radio"]:checked + label + .accordion-content {
  display: block; /* Show content when radio button is checked */
}

Paskaidrojums:

Piekļūstamības uzlabošana ar ARIA atribūtiem

Lai nodrošinātu, ka mūsu akordeons ir piekļūstams lietotājiem ar invaliditāti, mums jāpievieno ARIA atribūti. ARIA (Accessible Rich Internet Applications) atribūti sniedz semantisku informāciju palīgtehnoloģijām, piemēram, ekrāna lasītājiem.

Lūk, kā mēs varam uzlabot piekļūstamību:


<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">Section 1 Title</label>
  <div id="content1" class="accordion-content" role="region" aria-labelledby="section1">
    <p>Content for Section 1.</p>
  </div>

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

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

Paskaidrojums:

Svarīgi apsvērumi piekļūstamībai:

Pielāgošana un uzlabojumi

Pamata tikai ar CSS veidoto akordeonu var tālāk pielāgot un uzlabot, lai tas atbilstu konkrētām dizaina prasībām.

Pāreju pievienošana

Lai radītu plūstošāku lietotāja pieredzi, mēs varam pievienot CSS pārejas akordeona saturam.


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

input[type="radio"]:checked + label + .accordion-content {
  display: block;
  max-height: 500px; /* Set a maximum height for the transition */
}

Paskaidrojums:

Stilizēšana ar ikonām

Ikonu pievienošana akordeona galvenēm var uzlabot vizuālo pievilcību un lietotāja izpratni. Šim nolūkam varat izmantot CSS pseidoelementus vai fontu ikonas.

Izmantojot CSS pseidoelementus:


label::after {
  content: '+'; /* Initial icon */
  float: right;
  font-size: 1.2em;
}

input[type="radio"]:checked + label::after {
  content: '-'; /* Change icon when expanded */
}

Izmantojot fontu ikonas (piemēram, Font Awesome):

  1. Iekļaujiet Font Awesome CSS savā HTML: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="..." crossorigin="anonymous" />
  2. Izmantojiet atbilstošās Font Awesome klases savās etiķetēs:

<label for="section1">Section 1 Title <i class="fas fa-plus"></i></label>

Pēc tam izmantojiet CSS, lai mainītu ikonu, kad sadaļa ir izvērsta:


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

input[type="radio"]:checked + label {
    /* insert the minus icon */
}

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

Responsīvā dizaina apsvērumi

Nodrošiniet, ka jūsu akordeons labi darbojas dažādu izmēru ekrānos, izmantojot responsīvā dizaina metodes. Varat izmantot mediju vaicājumus, lai pielāgotu akordeona stilu atkarībā no ekrāna platuma.

Piemērs:


@media (max-width: 768px) {
  .accordion-container {
    width: 100%; /* Adjust width for smaller screens */
  }

  label {
    padding: 8px;
    font-size: 0.9em; /* Adjust font size */
  }
}

Padziļinātas metodes

Lai gan pamata tikai ar CSS veidotais akordeons nodrošina stabilu pamatu, ir arī padziļinātas metodes, kas var vēl vairāk uzlabot tā funkcionalitāti un lietotāja pieredzi.

Stāvokļa saglabāšana ar Local Storage

Varat izmantot JavaScript (lai gan tas atceļ tīra CSS pieeju) un vietējo krātuvi (local storage), lai atcerētos akordeona stāvokli, lai, lietotājam atgriežoties lapā, iepriekš atvērtās sadaļas joprojām būtu atvērtas.

Dinamiska satura ielāde

Akordeoniem ar lielu satura apjomu varat ielādēt saturu dinamiski, izmantojot AJAX. Tas var uzlabot sākotnējo lapas ielādes laiku un samazināt joslas platuma patēriņu.

Biežāko problēmu risināšana

Šeit ir dažas biežāk sastopamās problēmas, ar kurām varat saskarties, ieviešot tikai ar CSS veidotus akordeonus, un kā tās atrisināt:

Piemēri no reālās dzīves

Tikai ar CSS veidotus akordeonus var izmantot dažādos reālās dzīves scenārijos:

Noslēgums

Tikai ar CSS veidoti akordeoni ar viena atvēruma funkcionalitāti piedāvā jaudīgu un efektīvu veidu, kā uzlabot lietotāja pieredzi un piekļūstamību jūsu vietnē. Izmantojot CSS selektoru un ARIA atribūtu spēku, jūs varat izveidot interaktīvus elementus, kas ir veiktspējīgi, viegli uzturami un piekļūstami plašam lietotāju lokam. Neatkarīgi no tā, vai veidojat vienkāršu BUJ lapu vai sarežģītu tīmekļa lietojumprogrammu, tikai ar CSS veidoti akordeoni var palīdzēt jums pasniegt informāciju skaidrā un saistošā veidā, veicinot labāku kopējo lietotāja pieredzi globālai auditorijai.

Papildu mācību resursi