CSS akordeonları, genişletilebilir ve daraltılabilir menüler, snippet'ler, resimler, videolar, SSS'ler, listeler ve makale alıntıları için yaygın olarak kullanılır. Bunları HTML, CSS ve JavaScript (veya jQuery) kullanarak kolayca oluşturabilirsiniz. Yalnızca CSS akordeonları oluşturmak biraz zorlu bir iştir, ancak JavaScript'in devre dışı bırakıldığı ortamlarda çok faydalıdır.

Bu kılavuzda, yalnızca CSS'ye yönelik bir akordeon oluşturmaya yönelik adım adım bir yaklaşım öğreneceksiniz.

Yalnızca HTML Kullanarak Temel Akordeon Oluşturma

Önceliğiniz HTML kullanarak erişilebilir bir akordeon oluşturmaksa, ve etiketler gitmenin yoludur. Hangi programlama dilini kullanırsanız kullanın, yalnızca HTML akordeon bozulmadan kalacaktır. Oluşturmak ebeveyn olarak etiketleyin ve soruyu bir etiket. İçine açıklayıcı bir cevap yazın etiket. Herhangi bir sayıda SSS için işlemi yineleyin.

SSS 1



Lorem ipsum dolor, sit amet conectetur adipisicing elit. Gerekçe adipisci illum error, hic expedita numquam impedit explicabo vitae iure quae vero autem quia quibusdam tempora atque harum perferendis praesentium dolor!





instagram viewer







SSS 2



Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt suscipit repudiandae cupiditate içinde accusantium recusandae tempora sint eligendi, perferendis aspernatur Architecto voluptas Laborum adipisci neque voluptates sonuç. 






SSS 3



Tenetur, ex delectus, perferendis aperiam voluptatem consequuntur molestiae rerum vitae ab modi, eksi quis dignissimos. Dolorem quaerat odit, iusto Laboriosam possimus, içinde mimari aliquam commodi sapiente saepe sequi at eligendi hic reprehenderit repelendus quos!

Akordeon Şekillendirme

Akordeonun stilini ayarlayarak yapabilirsiniz. arka plan rengi, sınır yarıçapı, kenar boşluğu, dolgu malzemesi, vesaire.

vücut {
 font ailesi:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 maksimum genişlik: 30rem;
 kenar boşluğu: 1.5 rem otomatik;
}
Özet {
 yazı tipi ağırlığı: 600;
 renk: rgb (255, 255, 255);
 arka plan rengi: rgb (7, 185, 255);
 dolgu: 1.2rem;
 kenar boşluğu-alt: 1.2rem;
 sınır yarıçapı: 0.5rem;
 imleç: işaretçi;
}

Çıktı:

Tek sınırlama, kodun her bir parçası üzerinde kontrol sahibi olmayacak olmanızdır. HTML yapısı değiştirilebilir, ancak özel bir akordeon oluşturamazsınız. Bu nedenle, gelişmiş CSS kullanarak özel bir SSS bölümü oluşturalım.

Özel SSS Bölümünüzü Oluşturun

Yalnızca CSS'ye özel bir akordeon oluşturmanın iki popüler yöntemi vardır. Onay kutularını veya radyo düğmelerini kullanabilirsiniz; her iki yöntemi de açıklayacağız.

Onay Kutusu Yöntemini Kullanma

Onay Kutusu Yöntemi şunları kullanır: onay kutusu giriş türü olarak. Bir kullanıcı bir sekme seçtiğinde, onay kutusunu işaretler ve açılır. Bir kutunun içinde birden fazla onay kutusunu işaretlemenize benzer şekilde, Onay Kutusu Yöntemini kullanarak birden çok sekmeyi aynı anda açabilirsiniz. HTML formu.

HTML

Yalnızca Özel CSS Akordeon (SSS)

Onay Kutusu yöntemini kullanma






Yalnızca CSS kullanarak özel bir akordeon nasıl oluşturulur?


 Lorem ipsum dolor sit amet conectetur adipisicing elit. Harum debitis voluptas aliquid tenetur quas sucipit
 varsayımda a, nesciunt eum nobis eaque, exercitationem ayırt edici diğer ad ullam quia. yozlaşmış beatae
 necessitatibus nihil.









Sözde öğelerin yüksekliği nasıl değiştirilir?


 Temporibus vel dolore nam dolorem similique voluptatum. Aliquam, dolor et! Tempore mollitia voluptatibus
 ducimus hariç, doloribus aliquam ipsum vel, accusantium quo nemo expedita esse esse eos libero olay
 reprehenderit facere ex hic ipsa odit in! Akşam yemeği.

Genel CSS

Temel CSS'yi gövdeye uygulayın.

vücut {
 renk: #502c2c;
 arka plan: #f1edec;
 dolgu: 1.2rem;
 yazı tipi ailesi: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 maksimum genişlik: 45rem;
 kenar boşluğu: 0 otomatik;
 yazı tipi boyutu: 1.2rem;
}

Akordeon Şekillendirme

İlk olarak, girişi değiştirerek onay kutularını gizleyin.

/* Onay kutularını veya radyo düğmesini gizleme*/
girdi {
 konum: mutlak;
 opaklık: 0;
 z-endeksi: -1;
}

Şimdi akordiyonu şekillendirin. Bir ekleyebilirsiniz::sonrasında için sözde eleman + imza. bir Karakter Varlık Referans Tablosu ve herhangi birini kullan Varlık Dönüşüm Hesaplayıcı Sayısal Değerin CSS Değerini bulmak için. Burada, CSS Değeri + NS \002B.

/* Akordeon stilleri */
.SSS {
 renk: #ffe3e3;
 kenar-alt: 3rem;
}
.faq-etiket {
 yazı tipi boyutu: 1.5rem;
 ekran: esnek;
 hizalama öğeleri: merkez;
 justify-content: boşluk-arasında;
 dolgu: 1em;
 arka plan: #b61818;
 yazı tipi ağırlığı: kalın;
 imleç: işaretçi;
 kullanıcı seçimi: yok;
}
.faq-label:: sonra {
 içerik: '\002B';
 dolgu: 0.51rem;
 dönüştürme: ölçek (1.8);
 metin hizalama: merkez;
 geçiş: tüm 0.35'ler;
}
.faq içeriği {
 maksimum yükseklik: 0;
 dolgu: 0 1em;
 renk: #2c3e50;
 arka plan: beyaz;
 geçiş: tüm 0.35'ler;
 görüntü yok;
}

Şimdi akordiyona işlevsellik katalım. bitişik ve öznitelik seçiciler. Buraya, \2013 için CSS Değeri –, temsil eden Sayısal Değer –.

girdi: kontrol edildi + .faq-label {
 arka plan: #8f1414;
}
girdi: kontrol edildi + .faq-label:: sonra {
 içerik: '\2013';
 dönüştürme: ölçek (1.5);
}
girdi: kontrol edildi ~ .faq içeriği {
 maksimum yükseklik: 100vh;
 dolgu: 1em;
 Ekran bloğu;
 geçiş: tüm 0.35'ler;
}

Çıktı:

Radyo Düğmesi Yöntemini Kullanma

Radyo Düğmesi Metodu'nun giriş tipi şu şekilde ayarlanmıştır: radyo. Kullanıcı bir sekmeye tıkladığında, o sekmeye karşılık gelen gizli radyo düğmesi açılır. Sonraki sekmeye tıkladığınızda, önceki sekme anında kapanır. Radyo Düğmesi Yöntemini kullanarak bir seferde yalnızca bir sekme açabilirsiniz.

HTML

Yalnızca Özel CSS Akordeon (SSS)

Radyo Düğmesi yöntemini kullanma






Radyo Düğmesi yöntemini kullanarak akordeon nasıl oluşturulur?


 Lorem, ipsum dolor sit amet conectetur adipisicing elit. Zorunlulukların ortadan kalkması için gerekli koşulların ortadan kalkması, zaman aşımına uğramaması, zaman aşımına uğramaması gerektiği anlamına gelir.









Yalnızca CSS kullanarak özel bir akordeon nasıl oluşturulur?


 Aperiam dolores autem odit, hiç bir şey, minimum quas laudantium aspernatur possimus reiciendis vitae ducimus emek quidem velit vel temporibus! Illo sunt placeat officiis, tiure magnam. İlan otur perferendis ducimus dicta, est aspernatur asperiores, yarı beatae quos deleniti.









Akordeon stili ne anlama geliyor?


 Laudantium quibusdam Laboriosam hic omnis quas ullam commodi rem. Mimari ve iş için uygun bir zaman diliminde mi? Vel, hayır!









Tümünü kapat ×

CSS

Her iki yöntem de yalnızca yapısal bakış açısından farklı olduğundan, Onay Kutusu Yönteminin yukarıdaki CSS'sini kopyalayın. Her zaman açık bir sekme olduğunu fark edebilirsiniz. Bunun nedeni, onay kutuları gibi radyo düğmelerinin işaretini kaldıramamanızdır. Bunu başarmak için, aşağıdaki CSS kodunu herhangi bir açıklama olmadan "Tümünü Kapat" radyo düğmesine ekleyin.

/* Hepsini kapatıyoruz */
.faq-etiket {
 pozisyon: göreceli;
}
.faq-close {
 ekran: satır içi blok;
 dolgu: 1rem;
 yazı tipi boyutu: 1rem;
 arka plan: #b61818;
 imleç: işaretçi;
 konum: mutlak;
 sol: 64rem;
}

Çıktı:

Denemeye Devam Edin ve Animasyonlar Ekleyin

Akordeonların basit bir mantığı vardır: Bir menüye tıkladığınızda, gizli içeriği görünecektir. Artık nasıl akordeon oluşturulacağını bildiğinize göre, öğrendiklerinizi uygulama ve denemeler yapmanın tam zamanı. Özellikle görüntüleri görüntülerken tasarımı geliştirmek için yatay akordeonlar oluşturabilirsiniz. Ana kare animasyonlarını kullanarak geçiş efektini ayarlayarak kodla denemeler yapın.

Naincy Mourya (16 Makale Yayınlandı)

Naincy, son derece duyarlı web siteleri ve web kopyaları ile birlikte verimli içerik stratejisi oluşturma konusunda uzmanlaşmıştır. Trend olan teknolojileri yakından takip eden serbest çalışan bir teknoloji yazarıdır.

Naincy Mourya'dan Daha Fazla